vue3+vite5.0 使用TailWind.css

1.安装依赖

yarn add tailwindcss@3.4.14 postcss@8.4.47 autoprefixer@10.4.20 -D

npm i  -D tailwindcss@3.4.14 postcss@8.4.47 autoprefixer@10.4.20

2.在main.js中引入

......

import "tailwindcss/tailwind.css"; 

.......

3.创建tailwind.config.js文件

把下列代码全部粘贴到tailwind.config.js中

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

module.exports = {

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

  theme: {

    extend: {},

  },

  plugins: [],

};

4.在vite.config.js中引入

import tailwindcss from "tailwindcss"; 

export default defineConfig({

  css: {

    postcss: {

      plugins: [tailwindcss],

    },

  },

});

上述流程走完，就可以直接使用了，效果如下 ....