初探 TailwindCSS

tailwindcss 是一个快速、高效、可定制的 CSS 框架，它使用类名来定义样式也就原子 CSS（原子 CSS 是一种使用原子 class 和类似于函数式编程的方式来编写 CSS 的方法。它将样式规则分解为独立的、可重用的组成部分，并使用这些组成部分来构建更大的样式效果）。之前用过 bootstarp 的应该都不陌生，只需要给元素设置已经预设的类名，就可以渲染出我们想要的样式。

具体什么意思，看到最后就懂了。

安装

在使用之前需要进行安装

$ npm install tailwindcss

或者使用 pnpm 以及 yarn，如果要在 vite 中使用一般需要配置 postcss，额外安装postcss autoprefixer两个包。

配置

创建 postcss.config.js 文件

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

告诉 PostCSS 使用 Tailwind CSS 和 Autoprefixer 插件。

然后创建tailwind.config.js 文件，用于配置 tailwindcss 的各种选项，如字体、颜色、间距等

module.exports = {
  mode: 'jit',
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

配置里的 mode: 'jit' 选项启用了 JIT（即“即时编译”）模式，可以加速 Tailwind CSS 的编译速度；purge用于删除目标文件中没有用到的CSS 代码，从而减少产物的体积。

引入 TailWindCSS，在主样式文件中添加以下代码

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

此时 IDE 可能会有警告，因为 IDE 不认识@tailwind，在项目目录下新建.vscode文件夹，然后新建setting.json添加以下代码即可取消警告。

{
  "css.lint.unknownAtRules": "ignore"
}

然后就可以在 Vite 项目中使用 TailWindCSS 了，其他打包工具的配置方式大致相同，按照对应平台的配置方式添加即可。

tailwindcss 配置

之前说的是 TailWindCSS 在工程化配置中的相关操作，TailWindCSS 也有自已的配置文件，就是上面提到了tailwind.config.js，可以自定义，也可以使用默认的，自定义没有覆盖到的使用默认配置。

文件名也可以自定义，如果使用自定义配置文件名需要再 postcss 的配置文件中指明

module.exports = {
  plugins: {
    tailwindcss: {
      config: '自定义文件的路径'
    },
    // ...
  },
}

深色模式

通过darkMode来配置深色模式的策略，用户的操作系统开启了深色模式，dark:{class} 类将优先于无前缀的类，可选值有false、media、class

• false：关闭深色模式变体；
• media：在底层使用 prefers-color-scheme 媒体功能；
• class：通过 class 策略控制深色模式切换，支持手动切换时选用此模式。

主题

在theme中自定义色卡、字体、边框等等默认属性，theme 对象有 screens、colors 和 spacing三部分配置以及核心插件的自定义，分别负责分辨率、调色板、间距三部分内容。

这三部分放在 extend 字段下可以用来拓展，如果不放在 extend下就会覆盖默认的样式

下面是 spacing 的配置方式

// 拓展
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '20px'
      }
    }
  },
}

// 覆盖
module.exports = {
  theme: {
    spacing: {
      '13': '20px'
    }
  }
}

声明之后相关的类（默认情况下，间距比例由 padding、 margin、 width、 height、 maxHeight、 gap、 inset、 space 和 translate 核心插件继承）就会继承这些属性，例如 spacing 中定义了 13: ‘20px’，那么所有的和长度有关的样式都会有相应的类，例如p-13、m-13、h-13等。

颜色相关的配置基本类似，但是一个颜色可以配置多种状态，如下

module.exports = {
  theme: {
    extend: {
      colors: {
        custom: {
          light: '#bae637',
          DEFAULT: '#a0d911',
          dark: '#5b8c00',
        }
      }
    }
  },
}

这样颜色相关的核心插件会生成三种状态，例如文本颜色：text-custom-light、text-custom、text-custom-dark。DEFAULT 是默认状态，不需要额外的修饰符，很多地方都是如此。

当然，你也可以不适用对象的形式，使用字符串的形式来定义颜色，例如

module.exports = {
  theme: {
    extend: {
      colors: {
        custom: {
          light: '#bae637',
          DEFAULT: '#a0d911',
          dark: '#5b8c00',
        },
        'custom-str': '#409eff'
      }
    }
  },
}

这样就可以直接使用text-custom-str来使用颜色。

在响应式配置方面默认使用了以下配置

如果需要自定义配置可以在 screens 下进行修改

module.exports = {
  screens: {
    sm: '480px',
    md: '768px',
    lg: '976px',
    xl: '1440px',
  },
}

使用

具体的类比较多，没法在这里细说，可以去文档中查看，另外可以在编辑器中安装 TailWindCSS 的代码提示插件，例如 VSCode 中可以安装以下插件

JetBrains 系列的IDE 中天生支持 TailWindCSS，只需要在添加配置文件之后即可使用。

看过前面配置的内容你应该大致对 TailWindCSS 的使用方法有了一些了解，就是将css 属性单独提取出来进行封装，在使用时根据样式搜索文档即可，例如 padding

变体

变体（Variant）是一组条件，它们用于根据不同的状态或环境来应用不同的样式。通过使用变体，可以方便地控制何时应用哪些样式，从而使 CSS 样式更加灵活和可重用。Tailwind CSS 中内置了一些常用的变体，例如响应式布局的 sm:, md:, lg: 和 xl: 前缀，以及 hover:, focus:, active:, disabled: 等状态类前缀。

我们可以使用变体来添加伪类的效果，例如在元素上悬浮之后改变背景色我们可以这样做

<button class="bg-blue-500 w-20 p-2 text-white rounded-lg hover:bg-blue-600">按钮</button>

通过变体实现响应式也很方便

<div class="h-[50px] bg-blue-500 md:bg-green-500 lg:bg-red-500"></div>

在 lg 分辨率下是红色背景，小于 lg 大于等于 md 分辨率下是绿色背景，小于md 分辨率是蓝色。注意：Tailwind 的断点仅包括 min-width 而没有 max-width，意思是只需要指定一个功能何时生效，而不是何时结束。如果只想在一个断点上应用某个功能类，解决方案是在更大的断点上添加另一个功能类，用来抵消前一个功能类的效果。例如

<div class="bg-green-500 md:bg-red-500 lg:bg-green-500"></div>

组合

如果你觉得上面 button 的组合方式很多写起来很累我们也可以对一组固定的样式进行封装

.btn {
  @apply bg-blue-500 w-20 p-2 text-white rounded-lg hover:bg-blue-600;
}

然后直接使用 btn 作为类名即可。虽然这样有点脱了裤子放屁，和原来的写法没啥区别，但是大多时候真的能提高效率。

额外变量

如果你需要的尺寸没有在配置中存在，而且只有到了一次，没有必要单独去添加配置，那么可以用下面这种形式来使用。

例如有如下原始样式

div {
  width: 139px;
  height: 21px;
  background-color: #123647;
}

使用 TailWindCSS 的形式可以这样写

<div class="w-[139px] h-[21px] bg-[#123647]"></div>

引用主题

如果想在原本的 css 写法中使用配置文件中定义的主题变量，可以通过theme()函数来引用，当然这并不是一个标准的 css 功能。

.btn {
  @apply bg-blue-500 w-20 p-2 text-white rounded-lg hover:bg-blue-600;
  color: theme('colors.custom-str'); // 之前配置的颜色
}

theme 函数试图从完全合并的主题对象中找到您正在寻找的值，因此它可以引用您自己的定制以及默认的主题值。它也是递归工作的，所以只要在链的最后有一个静态值，它就能解析出您要找的值。

也就是说，按照配置文件中主题的访问路径作为参数，即可放文档静态变量。

以上内容便是 TailWindCSS 的初级使用方式，这些用法已经基本可以满足我们日常的需求了，更多的使用姿势可以研读官网的文档进行探索。