Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex，pt-4，text-center和 rotate-90 这样的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。官网：https://tailwindcss.com/
1.安装
- 以 vite + react17 + tailwind 为例
- 初始化项目
- 安装依赖
pnpm install -D tailwindcss
2.创建 tailwind.config.js和postcss.config.js 配置文件。
npx tailwindcss init
3.在tailwind.config.js 配置文件中添加所有模板文件的路径
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,jsx}'],
theme: {
extend: {},
},
plugins: [],
}
4.根目录创建tailwindcss.css文件,将加载 Tailwind 的指令添加到 CSS 文件中
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
5.将tailwindcss.css文件引入到入口文件中
- 我这里是main.tsx文件(还可以是index.js/index.tsx,别告诉我你不知道入口文件)'
import './global.less';
import '@arco-design/web-react/dist/css/arco.css';
import './tailwind.css';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import BaseContext from './context/BaseContext';
import BaseLayout from './Layout';
import login from './pages/login';
const App = () => {
return (
<BrowserRouter>
<BaseContext>
<Switch>
<Route path={`/login`} component={login} />
<Route path={`/`} component={BaseLayout} />
</Switch>
</BaseContext>
</BrowserRouter>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
6.运行测试，就可以愉快地在项目中使用 tailwindcss 了
如果用不了试试修改tailwindcss.css文件,改为:
@tailwind base;
@tailwind components;
@tailwind utilities;