react基础框架搭建4-tailwindcss配置：react+router+redux+axios+Tailwind+webpack

黎明初时2026-01-01 11:04

可以加速css编写速度

官方文档：

https://www.tailwindcss.cn/

复制代码

npm install tailwindcss

1、初始化

复制代码

npx tailwindcss init -p

2、配置 tailwind.config.js：

在根目录创建此文件

复制代码

  module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

3、在 src/index.css 中引入 Tailwind：

复制代码

 @tailwind base;
 @tailwind components;
 @tailwind utilities;

4、补充说明-tailwindcss简介

可以直接在 HTML 中使用一些类来快速构建样式，而无需编写自定义 CSS：bg-blue-500、text-center、p-4 等。

配置文件tailwind.config.js只可以设置自定义主题、颜色、间距、字体等。

使用：

复制代码

<div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
    <div class="p-4">
        <h2 class="text-xl font-bold text-gray-800">标题</h2>
        <p class="text-gray-600">这是一个使用 Tailwind CSS 构建的示例卡片。</p>
        <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
            点击我
        </button>
    </div>
</div>