Vue3如何使用tailwindcss,,,,,,,,,,,,,,css框架tailwindcss在Vue3中如何使用

 1.安装

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

2.将根目录下postcss.config.js换成(.postcssrc.json)文件(个人喜好)

在里面添加

{
  "plugins": {
    "tailwindcss": {},
    "autoprefixer": {},
}

{
  "plugins": {
    "tailwindcss": {},
    "autoprefixer": {},
    "postcss-px-to-viewport-8-plugin": {
      "unitToConvert": "px",
      "viewportWidth": 2100,
      "viewportHeight": 1180,
      "unitPrecision": 5,
      "propList": [
        "*"
      ],
      "viewportUnit": "vw",
      "fontViewportUnit": "vw",
      "selectorBlackList": [
        ".no_change_px"
      ],
      "minPixelValue": 1,
      "mediaQuery": false,
      "replace": true
    }
  }
}

3.根目录下创建tailwind.config.ts文件(把单位转成px,因为我是用的是px转vw插件,没有使用rem单位)

export default {
    darkMode: 'class',
    content: ['./index.html', '!./src/**/__tests__/*', './src/**/*.{vue,ts,tsx}'],
    theme: {
        // 内边距
        padding: Array.from({length: 1000}).reduce((map, _, index) => {
            map[index] = `${index}px`;
            return map;
        }, {}),
        // 外边距
        spacing: Array.from({length: 1000}).reduce((map, _, index) => {
            map[index] = `${index}px`;
            return map;
        }, {}),
        // 圆角
        borderRadius: Array.from({length: 100}).reduce((map, _, index) => {
            map[index] = `${index}px`;
            return map;
        }, {}),
        extend: {
            // 宽度
            width: Array.from({length: 1000}).reduce((map, _, index) => {
                map[index] = `${index}px`;
                return map;
            }, {}),
            // 高度
            height: Array.from({length: 1000}).reduce((map, _, index) => {
                map[index] = `${index}px`;
                return map;
            }, {}),
            // 字体大小
            fontSize: Array.from({length: 100}).reduce((map, _, index) => {
                map[index] = `${index}px`;
                return map;
            }, {}),
            // 行高
            lineHeight: Array.from({length: 1000}).reduce((map, _, index) => {
                map[index] = `${index}px`;
                return map;
            }, {}),
        },
    },
    plugins: []
}

4.在styles/index.scss中引入

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

5.在main.ts中引入样式

import "@/styles/index.scss";