TailwindCSS 3.0 安装方法
一. CDN方式引入页面
在html页面的<head>
标签中引入<script src="https://cdn.tailwindcss.com"></script>
<!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">
<title>Document</title>
<!-- 引入标签 -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="m-7 text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
二. 使用Tailwind Cli安装
- 在项目目录下初始化项目, 然后安装
tailwindcss
, 并创建tailwind.config.js
文件.
# 在项目目录下初始化项目
npm init -y
# 安装tailwindcss
npm install tailwindcss -D
# 创建 tailwind.config.js 文件.
npx tailwindcss init
- 设置
tailwind.config.js
文件
// tailwind.config.js
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- 根目录创建
main.css
文件, 引入tailwindcss
命令
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
- 打开
package.json
文件, 在scripts
中添加build
命令.
{
"name": "tailwind-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
// 添加build
"build": "npx tailwindcss -i main.css -o ./public/dist/main.css",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.0.13"
}
}
- 创建
dist/index.html
文件
<!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">
<title>Document</title>
<!-- 引入编译后的css文件 -->
<link rel="stylesheet" href="./dist/main.css">
</head>
<body>
<h1 class="m-7 text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
- 项目目录终端运行
build
命令
npm run build
- 使用live server或者直接在浏览器打开
index.html
文件即可
三. PostCSS方式引入
- 使用
npm
安装talwindcss postcss autoprefixer
, 生成tailwind.config.js
文件
# 初始化npm项目
npm init --yes
# 安装talwindcss postcss autoprefixer
npm install tailwindcss postcss autoprefixer -D
# 生成tailwind.config.js
npx tailwindcss init
- 设置
tailwind.config.js
文件
// tailwind.config.js
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- 创建
postcss.config.js
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
}
- 根目录创建
main.css
文件, 引入tailwindcss
命令
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
- 打开
package.json
文件, 在scripts
中添加build
命令.
{
"name": "tailwind-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
// 添加build
"build": "postcss main.css -o public/dist/main.css",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"tailwindcss": "^3.0.13"
}
}
- 创建
dist/index.html
文件
<!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">
<title>Document</title>
<!-- 引入编译后的css文件 -->
<link rel="stylesheet" href="./dist/main.css">
</head>
<body>
<h1 class="m-7 text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
- 项目目录终端运行
build
命令
npm run build
- 使用live server或者直接在浏览器打开
index.html
文件即可
四. Vue2或Vue3中安装
- 使用
npm
安装talwindcss postcss autoprefixer
, 生成tailwind.config.js
和postcss.config.js
文件
# Vue3
# 安装talwindcss postcss autoprefixer
npm install tailwindcss postcss autoprefixer -D
# 生成tailwind.config.js 和 postcss.config.js
npx tailwindcss init -p
注意: 由于最新的tailwind css使用post css 8版本,vue2框架暂时还不支持,所以需要指定安装postcss7的版本.1
# Vue2
# 安装talwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 -D
# 生成tailwind.config.js 和 postcss.config.js
npx tailwindcss init -p
- 设置
tailwind.config.js
, 将所有模板文件路径放进去
// tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
- 在
src/main.js
中引入tailwind
// main.js
// Vue3
import { createApp } from 'vue'
import App from './App.vue'
import "tailwindcss/tailwind.css"; // Vue3中引入tailwindcss
createApp(App).mount('#app')
// Vue2
import Vue from 'vue'
import App from './App.vue'
import "tailwindcss/tailwind.css"; // Vue2中引入tailwindcss
Vue.config.productionTip = false
new Vue({render: h => h(App)}).$mount('#app')