跳转到内容
返回

tailwindcss - 入门体验

图片来源 - 黑板Black

前言

最近做 github-resume 的时候,体验了一段时间的 tailwind css , 记录一些心得。

简介

tailwind-css

<!-- 普通css -->
.title { color: #f8fafc; }
<p class="title">举个例子</p>

<!-- tailwind css -->
<p class="text-Slate-50">举个例子</p>

安装


# 进入项目目录
cd projext-xxx

# 安装所需依赖
# 注1:tailwindcss是基于postcss开发的
# 注2:autoprefixer是postcss的一个插件 用来解析css和添加浏览器前缀
npm install -D tailwindcss postcss autoprefixer

# 初始化tailwindcss 会自动创建一个tailwindcss配置文件
npx tailwindcss init -p

兼容性

特点

使用

安装完成后,在主css中引入下列代码

@tailwind base;
@tailwind components;
@tailwind utilities;

建议搭配以下插件(vscode),食用更愉快:

Tailwind Docs

基本使用

伪类、伪元素

以hover举例,其他差不多,详见官网

<!-- hvoer -->
<p class="hover:text-red">hover</p>

<!-- 根据父元素状态 -->
<div class="group">
  <p class="group-hover:text-red"></p>
</div>

<!-- 根据兄弟元素装填 -->
<div>
  <p className="peer">兄弟元素 - 1</p>
  <p className="peer-hover:text-red-800">兄弟元素 - 2</p>
</div>
// 第一个 最后一个
{
  data.map((item, i) => {
    return (
      <p key={i} className="first:text-blue-400 last:text-yellow-300">
        {item}
      </p>
    );
  });
}

公用样式

公用样式的抽离,有以下几种形式:

常见配置

module.exports = {
  // 定义
  mode: "jit",
  // 定义tailwindcss在哪些文件生效
  content: [],
  // 定义自己的设计原则(颜色的色系、主题、间距等,tailwindcss自带的都可以修改)
  theme: {
    extend: {},
  },
  // 注册tailwindcss插件  社区基于齐开发的组件什么的都是这样加载的
  plugins: [],
  // 使用自定义配置文件替代默认配置文件
  presets: []
  // 给tailwindcss的所有class添加前缀
  prefix: '',
  // 是否可以使用功能 !important 也可以设置为一个id选择器,将只允许在该dom下才能使用该修饰器
  important: true
  // ... 常用到的就这些,其他详见官网
};

基本原理

总结



上一篇
monorepo - 初探
下一篇
关于-OAuth