uniapp+vue3+vite+ts配置使用tailwindcss

文章索引

一、安装

npm install -D tailwindcss postcss autoprefixer

1	npm install -D tailwindcss postcss autoprefixer

二、创建并配置tailwindcss.config.js

npx tailwindcss init -p

1	npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  media: false,
  separator: '__',
  theme: {
    extend: {}
  },
  plugins: [],
  corePlugins: {
    // 禁用一些小程序class不支持的分割
    preflight: false // 默认样式
    // divideColor: false, // 分割边框颜色
    // divideOpacity: false, // 分割边框透明度
    // divideStyle: false, // 分割边框类型
    // divideWidth: false, // 分割边框长度
    // space: false, // 间距
    // placeholderColor: false, // 占位符颜色
    // placeholderOpacity: false, // 占位符透明度
    // ringWidth: false, // 阴影相关
    // boxShadow: false, // 阴影
    // container: false, // 容器布局
    // borderColor: false, // 边框颜色（在高版本中，生成了一个带 * 的样式，所以需要禁用）
  }
}

/** @type {import('tailwindcss').Config} */

module.exports = {

mode: 'jit',

content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],

media: false,

separator: '__',

theme: {

extend: {}

plugins: [],

corePlugins: {

// 禁用一些小程序class不支持的分割

preflight: false // 默认样式

// divideColor: false, // 分割边框颜色

// divideOpacity: false, // 分割边框透明度

// divideStyle: false, // 分割边框类型

// divideWidth: false, // 分割边框长度

// space: false, // 间距

// placeholderColor: false, // 占位符颜色

// placeholderOpacity: false, // 占位符透明度

// ringWidth: false, // 阴影相关

// boxShadow: false, // 阴影

// container: false, // 容器布局

// borderColor: false, // 边框颜色（在高版本中，生成了一个带 * 的样式，所以需要禁用）

}

三、在main.ts中引入tailwindcss

// index.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

// index.scss

@tailwind base;

@tailwind components;

@tailwind utilities;

// main.ts
import '@/assets/sass/index.scss'

1 2	// main.ts import '@/assets/sass/index.scss'

// 在settings.json中配置，处理警告：Unknown at rule @tailwindscss(unknownAtRules)
{
  "scss.lint.unknownAtRules": "ignore"
}

// 在settings.json中配置，处理警告：Unknown at rule @tailwindscss(unknownAtRules)

{

"scss.lint.unknownAtRules": "ignore"

}

四、配置postcss.config.ts，并在vite.config.ts中引入配置css

npm i -D postcss-class-rename css-byebye

1	npm i -D postcss-class-rename css-byebye

// postcss.config.ts

import { uniPostcssPlugin } from '@dcloudio/uni-cli-shared'
import postcssImport from 'postcss-import'
import tailwindcss from 'tailwindcss'
import postcssClassRename from 'postcss-class-rename'
import cssByebye from 'css-byebye'
import autoprefixer from 'autoprefixer'
import path from 'path'

const uniInputDir: string = process.env.UNI_INPUT_DIR as string

export default {
  plugins: [
    postcssImport({
      resolve(id) {
        if (id.startsWith('~@/')) {
          return path.resolve(uniInputDir, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(uniInputDir, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(uniInputDir, id.substr(1))
        }
        return id
      }
    }),
    tailwindcss(),
    // 根据平台差异进行不同的样式处理
    ...(process.env.UNI_PLATFORM !== 'h5'
      ? [
          // 使用postcss-class-name 包将小程序不支持的类名转换为支持的类名
          postcssClassRename({
            '\\\\:': '--',
            '\\\\/': '--',
            '\\\\.': '--',
            // '.:': '--',
            '\\*': '--'
          }),
          cssByebye({
            rulesToRemove: [/\*/],
            map: false
          })
        ]
      : []),
    uniPostcssPlugin(),
    autoprefixer({
      remove: true
    })
  ]
}

// postcss.config.ts

import { uniPostcssPlugin } from '@dcloudio/uni-cli-shared'

import postcssImport from 'postcss-import'

import tailwindcss from 'tailwindcss'

import postcssClassRename from 'postcss-class-rename'

import cssByebye from 'css-byebye'

import autoprefixer from 'autoprefixer'

import path from 'path'

const uniInputDir: string = process.env.UNI_INPUT_DIR as string

export default {

plugins: [

postcssImport({

resolve(id) {

if (id.startsWith('~@/')) {

return path.resolve(uniInputDir, id.substr(3))

} else if (id.startsWith('@/')) {

return path.resolve(uniInputDir, id.substr(2))

} else if (id.startsWith('/') && !id.startsWith('//')) {

return path.resolve(uniInputDir, id.substr(1))

}

return id

}

}),

tailwindcss(),

// 根据平台差异进行不同的样式处理

...(process.env.UNI_PLATFORM !== 'h5'

? [

// 使用postcss-class-name 包将小程序不支持的类名转换为支持的类名

postcssClassRename({

'\\\\:': '--',

'\\\\/': '--',

'\\\\.': '--',

// '.:': '--',

'\\*': '--'

}),

cssByebye({

rulesToRemove: [/\*/],

map: false

})

]

: []),

uniPostcssPlugin(),

autoprefixer({

remove: true

})

]

}

// vite.config.ts
import postcss from './postcss.config'

export default ({ mode }) =>
  defineConfig({

    ...
    css: {
      postcss
    }
  })

// vite.config.ts

import postcss from './postcss.config'

export default ({ mode }) =>

defineConfig({

...

css: {

postcss

}

})

五、文档

https://tailwindcss.com/docs/configuration

https://tailwindcss.com/docs/installation/using-postcss

https://postcss.org/

https://github.com/postcss/autoprefixer