关于使用vite4安装tailwind

Question

1、安装：npm install -D tailwindcss postcss autoprefixer
2、执行：npx tailwindcss init -p 创建 tailwind.config.js
3、tailwind.config.js配置如下
/** @type {import(‘tailwindcss’).Config} /
export default {
// 配置 tailwind的应用范围，进行扫描的文件
// 在这里我们配置了tailwind应用到 index.html 和 src 目录下的所有 .vue 和 .js 文件
content: ["./index.html", "./src/**/.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
4、项目根目录创建 postcss.config.js 配置如下
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
5、main.js配置：
import { createApp } from “vue”;
import App from “./App.vue”;
// 导入 tailwind 的基础样式
import “tailwindcss/tailwind.css”;
createApp(App).mount("#app");

6、新版本不需要创建scss样式文件，直接导入import “tailwindcss/tailwind.css”;就可以，这个文件已经提供了基础配置。另外对于vite4来说，vite.config.js不需要对tailwind做任何配置，postcss插件vite内部会自动引入进行运行。

Answer 1

Sunday 2023-06-19 16:27:52

你好

已在小节内置顶