一、引入postcss+tailwindcss

npm install -D tailwindcss postcss autoprefixer postcss-import postcss-loader

二、在根目录新建并配置tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {

    prefix: 'tw-‘, // 用于设置css类名的前缀

    content: ['./src/**/*.{js,jsx,ts,tsx}’],  // 用于告诉 Tailwind CSS 哪些文件需要扫描以查找使用的类名。
 
}

三、在根目录新建并配置postcss.config.js

const tailwindcss = require('tailwindcss’) //用于将 Tailwind CSS 的类名转换为实际的 CSS 样式。

const autoprefixer = require('autoprefixer’) //用于自动添加浏览器前缀，以便确保在不同浏览器中都能正常显示。

const postcssImport = require('postcss-import’) //用于处理 @import 规则，以便在 CSS 中引入其他 CSS 文件

module.exports = {

    plugins: [
        postcssImport,
        tailwindcss('./tailwind.config.js’), // 这里要配置刚刚新建的tailwind.config.js
        autoprefixer
    ], 

}

四、引入antd

1 、 安装

npm install antd -S

五、进入/src/index.css 入口文件引入antd css 和tailwind

@import 'antd/dist/reset.css’;// 如果是antd 4 的版本，使用antd/dist/antd.css
@tailwind base;
@tailwind components;
@tailwind utilities;

body {

    margin: 0;

    background-color: white;

}

Ps: 注意，如果你安装的antd 是4.x.x 那么引入的时候要用@import 'antd/dist/antd.css’ ，如果是5.x.x 的版本引入的时候使用@import 'antd/dist/reset.css’

六、配置webpack postcss-loader

postcss-loader 是一个 Webpack 的 loader，用于对 CSS 进行预处理。它可以将 CSS 文件交给 PostCSS 处理，以便使用各种插件来自动化生成浏览器前缀、处理嵌套规则、优化样式等。与其他 CSS 预处理器不同的是，PostCSS 是基于 JavaScript 的插件系统，可以灵活地扩展和定制。[1]
在 Webpack 的配置文件中，可以通过使用 postcss-loader 将 CSS 文件进行处理。通常情况下，它会与 style-loader 和 css-loader 一起使用，以便将 CSS 样式插入到 HTML 文件中。
总之，postcss-loader 可以让我们使用 PostCSS 插件来自动化处理 CSS，从而提高开发效率。

rules: [

...

        {    
            test: /\.css$/i,
            use: ['style-loader', 'css-loader', 'postcss-loader'],
        },//postcss-loader 会根据配置文件处理一些css的预处理

    ],
...
},

七、新建home页面以及login页面

1. 在src目录下创建一个pages文件夹，并且在该目录下创建login.tsx 以及home.tsx

cd src
mkdir pages
cd pages
touch login.tsx home.tsx

2. 编辑home.tsx

import React,{Component} from "react";


export default class Home extends Component{

    constructor(props:any){
        super(props)
    }
    render(){
        return(
         <div>
            <h1> helloworld </h1>

            <img width={"100px"} src="/assets/React-icon.png"></img>

        </div>
        )
    }
}

3. 编辑login.tsx

import React,{Component} from "react";
import {Button, Form, Input, message} from 'antd';
import { UserOutlined, LockOutlined, CloseCircleOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
export namespace Login {
  export interface ReqLoginForm {
    username: string;
    password: string;
  }
  export interface ResLogin {
    access_token: string;
  }
}
interface ILoginComponentState{
  loading:boolean;
}
// 类组件不能像函数组件那样直接使用useNavigate
export const withNavigation = (Component:any) => {
  return (props:any) => <Component {...props} navigate={useNavigate()} />;
};
class Login extends Component<any,ILoginComponentState>{
  state:ILoginComponentState
  constructor(props:any){
    super(props)
    this.state = {
      loading:false
    }
  }
  onFinish=async (loginForm:Login.ReqLoginForm)=>{
    //提交
    this.props.navigate('/');
  } 
  render(){
    return( 
    <div className="  tw-w-[300px]"> // 这里就是使用tailwindcss 的方式
        <div style={{color:'white',width:'100%',height:'50px',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:'20px'}}>
            <div style={{fontSize:'28px',fontWeight:'bold',whiteSpace:'nowrap',userSelect:'none'}}>test平台</div>
          </div>
          <Form name = "basic" 
                labelCol={{ span: 5 }}
			          initialValues={{ remember: true }}
                onFinish={this.onFinish}
			          size="large"
			          autoComplete="off">
            <Form.Item name="username" rules={[{required:true,message:"请输入用户名"}]}>
              <Input placeholder="用户名：admin" prefix={<UserOutlined/>}/>
            </Form.Item>
            <Form.Item name="password" rules={[{ required: true, message: "请输入密码" }]}>
              <Input.Password autoComplete="new-password" placeholder="密码：123456" prefix={<LockOutlined />} />
            </Form.Item>
            <Form.Item style={{display:'flex',alignItems:'center',justifyContent:'center',marginTop:'30px'}}>
            
              <Button  type="primary" htmlType="submit" loading={this.state.loading} icon={<UserOutlined />} style={{ background: "red", borderColor: "yellow" }}>
                {'登录'}
              </Button>
            </Form.Item>
          </Form>
    </div>
    )
  }
}
export default withNavigation(Login)

八、配置React-route
1、安装

npm install react-router-dom -S
npm install @types/react-router-dom -D 

2、编辑App.tsx 配置路由（在这里我们使用hash模式）

import React from "react";

import Home from "@/pages/home";

import Login from "@/pages/login";

import {HashRouter,Route,Routes} from 'react-router-dom'

const App = ()=>{

return (

    <HashRouter>
        <Routes>
            <Route path="/" Component={Home}></Route>

            <Route path="/login" Component={Login}></Route>

        </Routes>
    </HashRouter>
    )
}
export default App;

这样，当你访问http://localhost:8080/#/login 的时候就能看到你编辑的login页面，并且点击登录后会跳转到home页面

到此，简单的React-route、 tailwindcss、antd的引入以及使用，已经全部展示了，下一篇中会详细说说，如果配合redux做路由守卫，以及添加styled-compnent