原来 React 搭档 TailwindCSS 会这么好用

前言

TailwindCSS中文文档|TailwindCSS中文网

Tailwind CSS 可不是来吹风的，它是个“实用至上”的 CSS 框架。不像其他框架那样，给你一堆组件让你去挑选，Tailwind CSS 提供了一堆小巧精致的工具类，可以让你自由组合。

它的核心理念就是“功能类优先”，也就是说，每一个 class 都代表了一个 CSS 属性，这可真是把 “原子化” 发挥到了极致。

而且，Tailwind CSS 它还支持响应式设计，可以根据不同的屏幕尺寸，自动调整样式。

同时，它还支持暗黑模式。

React官方中文文档

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 的开发者和社区共同维护和更新。React 采用了声明式编程的思想，让开发者只需要关注应用的状态和如何展示状态，而不需要手动操作 DOM。这使得 React 在构建大型、复杂的单页应用（SPA）时非常高效。

React 还拥有丰富的生态系统和开发工具，如 React DevTools、Redux、React Router 等。

React 结合 TailwindCSS

1. 组件化开发

React 的组件化开发方式与 Tailwind CSS 的实用类优先理念非常契合。

2. 样式编写

这与 React 的 JSX 语法相结合，添加少量的类名，就能快速实现复杂的样式效果。

3. 响应式设计

Tailwind CSS 内置了响应式设计功能，结合 React 的条件渲染和状态管理功能，可以实现复杂的响应式布局和交互效果。

当然，还有很多两者相结合起来所迸发出来的开发优点，慢慢探索吧。

项目搭建

0. vite 初始化一个 React 项目

npm create vite@latest ./ -- --template react

npm install

1. 引进 TailwindCSS

1.1 在项目中安装依赖

npm install -D tailwindcss postcss autoprefixer

1.2 并创建配置文件

npx tailwindcss init -p

1.3 修改 tailwind.config.js 配置文件内容

/** @type {import('tailwindcss').Config} */
export default {
   
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
   
    extend: {
   },
  },
  plugins: [],
}

1.4 在项目中添加TailwindCSS样式

可以在 index.css 文件中引入：

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

于 main.jsx 文件导入

import './index.css'

1.5 Vscode 配置智能提示

如果在编写样式的时候，没有智能提示，那么可以安装一个插件

2. 拆分官网首页

• Section0 Header
• Section1 Hero
• Section2 PopularProducts
• Section3 SuperQuality
• Section4 Services
• Section5 SpecialOffer
• Section6 CustomerReviews
• Section7 Subscribe
• Section8 Footer

3. 提供 Mock 拦截环境

安装 Mock.js

import Mock from 'mockjs'

// 导航链接
Mock.mock('/api/navLinks', 'get', () => {
   
    return {
   
        data: [
            {
    href: "#home", label: "Home" },
            {
    href: "#about-us", label: "About Us" },
            {
    href: "#products", label: "Products" },
            {
    href: "#contact-us", label: "Contact Us" },
        ]
    };
})

// 鞋子数据
Mock.mock('/api/shoes', 'get', () => {
   
    return {
   
        data: [
            {
   
                thumbnail: '/src/assets/images/thumbnail-shoe1.svg',
                bigShoe: '/src/assets/images/big-shoe1.png',
            },
            {
   
                thumbnail: '/src/assets/images/thumbnail-shoe2.svg',
                bigShoe: '/src/assets/images/big-shoe2.png',
            },
            {
   
                thumbnail: '/src/assets/images/thumbnail-shoe3.svg',
                bigShoe: '/src/assets/images/big-shoe3.png',
            },
        ]
    };
})

// 统计数据
Mock.mock('/api/statistics', 'get', () => {
   
    return {
   
        data: [
            {
    value: '1k+', label: 'Brands' },
            {
    value: '500+', label: 'Shops' },
            {
    value: '250k+', label: 'Customers' },
        ]
    }
})

// 产品数据
Mock.mock('/api/products', 'get', () => {
   
    return {
   
        data: [
            {
   
                imgURL: '/src/assets/images/shoe4.svg',
                name: "Nike Air Jordan-01",
                price: "$200.20",
            },
            {
   
                imgURL: '/src/assets/images/shoe5.svg',
                name: "Nike Air Jordan-10",
                price: "$210.20",
            },
            {
   
                imgURL: '/src/assets/images/shoe6.svg',
                name: "Nike Air Jordan-100",
                price: "$220.20",
            },
            {
   
                imgURL: '/src/assets/images/shoe7.svg',
                name: "Nike Air Jordan-001",
                price: "$230.20",
            },
        ]
    }
})

// 服务数据
Mock.mock('/api/services', 'get', () => {
   
    return {
   
        data: [
            {
   
                imgURL: '/src/assets/icons/truck-fast.svg',
                label: "Free shipping",
                subtext: "Enjoy seamless shopping with our complimentary shipping service.",
            },
            {
   
                imgURL: '/src/assets/icons/shield-tick.svg',
                label: "Secure Payment",
                subtext: "Experience worry-free transactions with our secure payment options."
            },
            {
   
                imgURL: '/src/assets/icons/support.svg',
                label: "Love to help you",
                subtext: "Our dedicated team is here to assist you every step of the way."
            },
        ]
    }
})

// 评论数据
Mock.mock('/api/reviews', 'get', () =