🎈TailWind CSS
预计阅读时间: 2 分钟
$$
只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。
$$
💞一、创建项目+vite
npm create vite@latest my-project -- --template react
cd my-project
✨二、安装tailwind css
安装tailwindcss的同时还要安装其对等依赖项
npm install -D tailwindcss postcss autoprefixer
🎶三、安装相应配置文件
生成tailwind.config.js和postcss.config.js两个文件
🐚四、修改对应的配置文件
//tailwind.config.js。
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
'./src/**/*.{vue,js,ts,jsx,tsx}'
],
theme: {
extend: {},
},
plugins: [],
};
//postcss.config.js
export default {
plugins: {
autoprefixer: {},
tailwindcss: {},
},
};
- 创建
postcss.config.js文件，这里的配置主要是添加tailwindcss的插件，这样你编写的css才会被tailwindcss处理；
- 创建
tailwind.config.js文件，主要进行扫描规则、主题、插件等配置。
修改完这两个配置文件同样要对vite.config.js进行修改
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
+ import tailwindcss from "tailwindcss";
+ import autoprefixer from "autoprefixer";
export default defineConfig({
plugins: [react()],
+ css: {
+ postcss: {
+ plugins: [
+ tailwindcss,
+ autoprefixer
+ ]
+ }
+ }
})
🦢五、引入Tailwind的基本指令
// tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
引入方式
//main.js
import './tailwind.css'
🐧六、开始使用tailwind css
$$
让css停不下来
$$
<h1 className="text-3xl font-bold underline">Hello world!</h1>
这样你就得到了一个具有以下css属性的Hello world!
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
text-decoration-line: underline;
下面我们将画一个32px宽，32px高，蓝色的盒子
<div className="w-32 h-32 bg-blue-500"></div>
详细用法，等待更新······
