三步在 vite 中配置 tailwindcss

基于 tailwindcss@3.x

前言

• tailwindcss 是一个原子化的 css 工具，可以让你免于写 css，只写 html 即可
• 原理：利用你写的 html 的 class 名称来生成 css 样式，理解为一个 postcss 插件或 loader

第一步：安装 tailwindcss

npm i -D tailwindcss

第二步：引入 tailwindcss/tailwind.css

• 在你的主程序里面引入此样式，和引入其他 UI 框架样式一样的写法

// src/main.js
import 'tailwindcss/tailwind.css'

第三步：vite.config.js 配置插件

import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        tailwindcss({
          content: ['./src/**/*.vue']
        })
      ]
    }
  }
})

完成

• 这样你就可以在 vue 的 html 标签上添加 class 了，例如：w-10
  

<div class="w-200 text-20">演示文本</div>

rem 改为 px

• 默认生成的样式单位是 rem，但是有时候我们想要的是 px
• 更改 vite.config.js 配置，改为 px

import tailwindcss from 'tailwindcss'

const spacing = {}

Array.from({ length: 1000 }, (_, i) => {
  spacing[i] = `${i}px`
})

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        tailwindcss({
          content: ['./src/**/*.vue'],
          theme: {
            spacing,
            extend: {
              fontSize: ({ theme }) => theme('spacing')
            }
          }
        })
      ]
    }
  }
})

其它替换 tailwind.css 使用的方式

• 直接在 CSS（less, scss 文件都行） 里引入样式

@tailwind base;

@tailwind components;

@tailwind utilities;

• 如果只要 utilities 那么还可以简化
• main.js

import 'tailwindcss/utilities.css'

• .{css,less,scss}

@tailwind utilities;

关于在 VSCode 中安装 Tailwind CSS IntelliSense 插件提示代码问题

• 如果我们记不住 class 名称，可以用插件来提示代码
• 按照第三步的配置，我们装了 Tailwind CSS IntelliSense 这个插件之后要改个配置，才能生效
• 把第三步的抽离成 tailwind.config.ts 文件，初始化命令 npx tailwindcss init --ts，更多初始化命令

// 第三步 - vite.config.ts
import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        tailwindcss() // 运行时会自动加载 tailwind.config.ts 文件
      ]
    }
  }
})

// tailwind.config.ts 文件
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.vue']
} satisfies Config

• 效果
  

总结

• 最简单的就是只使用前面三步就够了，更多操作和配置可以看官网或者源码
• 需要使用提示的抽离下 tailwind.config.ts 文件