vite+vue3+ts使用tailwindcss

1.安装tailwindcss

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2.创建tailwindcss的配置文件

npx tailwindcss init //创建 tailwind.config.js 
npx tailwindcss init -p //创建 tailwind.config.js 和 postcss.config.js两个配置文件

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

配置tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"], //扫描以生成动态CSS类的文件或目录列表
  darkMode: false, // or 'media' or 'class' 设置暗黑模式
  theme: {
    //自定义或扩展Tailwind CSS的主题
    extend: {}
  },
  plugins: []
}

3.配置vite.config.ts选项

export default defineConfig({
  css: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
  },
});

使用上面的配置导入tailwindcss，可能出现“Dynamic require of 'tailwindcss' is not supported”的错误，通常是因为Vite在尝试导入模块时，对于CommonJS的动态require不支持。Vite使用ES模块系统，并期望所有的依赖都是ESM格式。所以我使用了下面的方法。

import postcssImport from "postcss-import"
import tailwindcss from "tailwindcss"
import autoprefixer from "autoprefixer"

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        // 先运行postcss-import插件，确保能正确解析@import语句
        postcssImport(),
        // 然后应用TailwindCSS
        tailwindcss("./tailwind.config.js"),
        // 最后添加autoprefixer进行兼容性处理
        autoprefixer()
      ]
    }
  }
})

如果找不到postcss-import模块需要执行以下命令

npm i --save-dev @types/postcss-import

4.main.ts中引入tailwind

import "tailwindcss/tailwind.css"

5.vscode中下载tailwindcss拓展

Tailwind CSS IntelliSense有提示代码和将鼠标悬停在Tailwind类名上，查看完整的CSS的效果。

6.在标签中使用tailwindcss

<template>
  <div class="h-[200px] w-[200px] bg-[#ccc]">
    <span>123 </span>
    <span class="ml-[100px] text-[#999]">456 </span>
  </div>
</template>