vite4+vue3使用Tailwind.css

[@toc]

一、安装

// 安装
yarn add -D tailwindcss


1
2
3
4

二、配置文件

// 生成配置文件
npx tailwindcss init

// 打开根目录下的 tailwind.config.js 文件，添加如下：
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{vue,ts,js,tsx,jsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

1
2
3
4
5
6
7
8
9
10
11
12
13

三、导入

在main.js中导入

import 'tailwindcss/tailwind.css'
1

四、vite配置

import tailwindcss from 'tailwindcss'

export default defineConfig({
  // ...
  css: {
    postcss: {
      plugins: [
        tailwindcss,
      ]
    }
  },
  // ...
})
1
2
3
4
5
6
7
8
9
10
11
12
13

五、使用

<template>
  <div>
    <div class="text-teal-600">试试 tailwind.css</div>
    <div class="w-32 h-32 bg-blue-500" />
  </div>
</template>
1
2
3
4
5
6