官方
www.tailwindcss.cn/docs/instal…
npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
在项目入口文件引入index.css
Vue项目
进入项目根目录，执行
$ vue add tailwind
Svelte
进入项目根目录，执行
$ npx svelte-add tailwindcss
静态页面(npm)
有node版本限制
Tailwind CSS requires Node.js 12.13.0 or higher.
目录结构如下
1、创建一个空项目，进入根目录，执行
$ npm init -y
2、安装tailwindcss及依赖
yarn add tailwindcss postcss autoprefixer -D
3、创建tailwind及postcss配置文件
初始化配置文件的命令注意加上
-p，否则不会生成postcss配置文件
npx tailwind init -p
添加文件过滤优化
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./dist/**/*.html"],
theme: {
extend: {},
},
plugins: [],
}
4、创建入口css
@tailwind base;
@tailwind components;
@tailwind utilities;
5、配置编译命令
"scripts": {
"dev": "tailwindcss -i ./css/tailwind.css -o ./dist/index.css --watch",
"build": "tailwindcss -i ./css/tailwind.css -o ./dist/index.css --minify",
"test": "echo \"Error: no test specified\" && exit 1"
},
6、引入css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
</head>
<body>
<div class="bg-blue-500 w-full">
ddd
</div>
</body>
</html>
静态页面(npx+tailwind cli)
目录结构如下
npx tailwindcss init
添加文件过滤优化
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./dist/**/*.html'],
theme: {
extend: {},
},
plugins: [],
}
2、入口css
@tailwind base;
@tailwind components;
@tailwind utilities;
3、引入css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
</head>
<body>
<div class="bg-sky-500 w-full h-screen"></div>
</body>
</html>
4、编译
// 开发模式
npx tailwindcss -i ./src/tailwind.css -o ./dist/index.css --watch
// 生产模式
npx tailwindcss -i ./src/tailwind.css -o ./dist/index.css --minify
