vue+vite使用tailwindcss

最新推荐文章于 2025-07-25 15:16:36 发布

原创最新推荐文章于 2025-07-25 15:16:36 发布 · 294 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

安装

npm install -D tailwindcss postcss autoprefixer

执行命令生成配置文件

自动生成配置文件tailwind.config.js和postcss.config.js

npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

修改配置文件

1）修改tailwind.config.js，在content里添加需要应用tailwindcss的文件

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

2）修改main.js,添加样式引用

import 'tailwindcss/tailwind.css'

3）在vite.config.js里添加tailwindcss插件

import tailwindConfig from './tailwind.config'
import tailwindcss from 'tailwindcss'
...

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    base: VITE_APP_ENV === 'production' ? '/' : '/',
    plugins: createVitePlugins(env, command === 'build'),
...
    //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
    css: {
      postcss: {
        plugins: [
          tailwindcss({
            config: tailwindConfig, // Tailwind CSS 配置文件路径
          }),
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') {
                  atRule.remove();
                }
              }
            }
          }
        ]
      }
    }
  }
})