前言

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

總結

• 最簡單的就是只使用前面三步就夠了，更多操作和配置可以看官網或者源碼