三步在 vite 中配置 tailwindcss

前言

• 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;

总结

• 最简单的就是只使用前面三步就够了，更多操作和配置可以看官网或者源码