TailWind CSS

🎈TailWind CSS

$$只需书写HTML代码，无需书写CSS，即可快速构建美观的网站。$$

💞一、创建项目+vite

npm create vite@latest my-project -- --template react
cd my-project

✨二、安装tailwind css

安装tailwindcss的同时还要安装其对等依赖项

npm install -D tailwindcss postcss autoprefixer

🎶三、安装相应配置文件

npx tailwindcss init -p

生成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: {},
  },
};

1. 创建postcss.config.js文件，这里的配置主要是添加tailwindcss的插件，这样你编写的css才会被tailwindcss处理；
2. 创建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>

详细用法，等待更新······