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

最新推荐文章于 2025-12-31 21:11:58 发布

原创最新推荐文章于 2025-12-31 21:11:58 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #webpack #前端 #前端框架

可以加速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>