在vue3工程中引入tailwindcss

一、安装tailwindcss

安装tailwindcss和它的前置依赖，然后创建tailwind.config.js和postcss.config.js文件。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

二、配置模板路径

将所有模板文件的路径添加到tailwind.config.js文件中。

tailwind.config.js

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

三、在css中添加tailwind指令

在你的src/style.css文件中添加@tailwind指令

@tailwind base;
@tailwind components;
@tailwind utilities;

四、配置vite

vite.config.js

import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

// ....

export default defineConfig(({ mode, command }) => {
    // ..
    
    return {
        // ...
         css: {
            postcss: {
                plugins: [
                    tailwindcss,
                    autoprefixer,
                {
                    postcssPlugin: 'internal:charset-removal',
                    AtRule: {
                    charset: (atRule) => {
                        if (atRule.name === 'charset') {
                        atRule.remove();
                        }
                    },
                    },
                },
                ],
            },
            }, 
        }
})

五、其他

tailwindcss 预设了很多样式，比如将svg的display设置为block，可能会影响到现有工程的布局，可以在tailwind.config.js中配置。

export default {
  // ...
  plugins: [
    function ({ addBase }) {
        addBase({
          svg: {
            display: 'initial', // 去掉 tailwind 默认的 display: block 样式
          },
        });
      },
  ],
};

参考资料

tailwindcss官方文档：https://tailwindcss.com/docs/installation