作者 创建一个vite管理的项目，安装相关的依赖，后完成一个使用 tailwindcss 制作前端模板的项目。
mkdir vite-tainwind
cd vite-tainwind/
创建项目，安装依赖
npm init -y
npm install -D tailwindcss tailwindcss-cli postcss autoprefixer vite
修改配置文件
{
"name": "vite-tainwind",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite", // 增加
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.6",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.3",
"tailwindcss-cli": "^0.1.2",
"vite": "^2.3.5"
}
}
创建配置文件
npx tailwindcss init -p
tailwindcss 2.1.3
✅ Created Tailwind config file: tailwind.config.js
✅ Created PostCSS config file: postcss.config.js
创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/css.css">
</head>
<body>
<h1>vite && tailwindcss </h1>
</body>
</html>
检测运行环境
# 如果报错，尝试运行 node node_modules/esbuild/install.js
npm run dev -- --host 0.0.0.0
使用 tailwindcss
mkdir css
touch css/css.css
touch index.html
填写css内容
.test {
color: red;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
npm i sass-loader node-sass -D