pnpm创建的vue3 ts项目引入tailwind css

版本说明

vue: 3.3.x
tailwindcss: 3.3.x
pnpm: 8.8.x

引入依赖

pnpm add tailwind -D

生成tailwind配置文件

pnpx tailwindcss init

执行上述命名后，会在项目根目录生成 tailwind.config.js 文件

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

ts项目需要修改文件名为tailwind.config.cjs

import { elementPlusNamespaceCssVar as eleCssVar } from './src/components/frame/theme/ThemeUtil.ts'

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 用于支持手动切换夜间模式. 详见: https://tailwind.nodejs.cn/docs/dark-mode
  darkMode: 'class',
  content: ['./src/**/*.{html,js,vue}', './index.html'],
  theme: {
    extend: {
      colors: {
        white: eleCssVar.getColorCssVar('white'),
        black: eleCssVar.getColorCssVar('black'),
        primary: eleCssVar.getColorCssVar('primary'),
        success: eleCssVar.getColorCssVar('success'),
        warning: eleCssVar.getColorCssVar('warning'),
        danger: eleCssVar.getColorCssVar('danger'),
        error: eleCssVar.getColorCssVar('error'),
        info: eleCssVar.getColorCssVar('info'),
      },
    },
  },
  plugins: [],
}

ThemeUtil.ts

export class NamespaceCssVar {
  namespace: string
  constructor(namespace: string) {
    this.namespace = namespace
  }
  private joinVarName(...args: string[]) {
    return args.reduce((pre, cur) => `${pre}-${cur}`, this.namespace)
  }
  public getCssVar(...args: string[]) {
    return `var(${this.joinVarName(...args)})`
  }
  public getColorCssVar(...args: string[]) {
    return this.getCssVar('color', ...args)
  }
}
export const elementPlusNamespaceCssVar = new NamespaceCssVar('--el')

让taildwind在vue3项目生效

新建src/asserts/scss/tailwind.scss

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

新建src/asserts/scss/index.scss

@use './tailwind.scss';

main.js或main.ts中引入src/asserts/scss/index.scss

import { createApp } from 'vue'
import App from '@/App.vue'
import '@/assets/scss/index.scss'

const app = createApp(App)
app.mount('#app')

如果使用了postcss，还需在postcss配置文件中添加

postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    /*
      postcss-preset-env作用: 打包时自动给css加特定浏览器前缀的代码。浏览器版本配置在package.json的browserslist中
       */
    'postcss-preset-env': {},
    /*
      cssnano作用:将css进行打包优化，能够减小打包后的css体积
      (如何看是否有效: 去掉这个配置，打包一次截图css的体积，加上这个配置再打包一次，
        对比两次打包后css的体积变化，会发现加了这个配置体积会小一点). 
        官网: https://www.cssnano.cn/docs/what-are-optimisations/
       */
    cssnano: {
      preset: ['default', { cssDeclarationSorter: false }],
    },
  },
}

cssnano的配置不是必须的，如果需要使用cssnano，请先引入依赖 pnpm add cssnano -D

要使用postcss-preset-env，请先引入依赖 pnpm add postcss-preset-env -D