react使用tailwind.css

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;