Create React App 集成 Tailwind CSS 教程

Create React App 集成 Tailwind CSS 教程

cra-tailwindcss Integrate Tailwind CSS in a Create React App setup 项目地址: https://gitcode.com/gh_mirrors/cr/cra-tailwindcss

1. 项目目录结构及介绍

项目的基本目录结构如下：

my-app/
├── README.md
├── node_modules/
├── package.json
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
└── tailwind.config.js

目录及文件介绍：

• README.md：项目说明文档，包含项目的基本信息和如何使用。
• node_modules/：存放项目依赖的第三方库。
• package.json：项目配置文件，包含项目依赖、脚本等。
• public/：
  • index.html：项目的入口 HTML 文件。
  • favicon.ico：网站图标。
• src/：
  • App.css：App 组件的样式文件。
  • App.js：App 组件的 JavaScript 文件。
  • App.test.js：App 组件的测试文件。
  • index.css：全局样式文件。
  • index.js：项目的入口 JavaScript 文件。
  • logo.svg：项目的 logo 图标。
• tailwind.config.js：Tailwind CSS 的配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 src/index.js，内容如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

文件功能：

• 导入依赖：导入 React、ReactDOM 以及样式文件。
• 渲染 App 组件：使用 ReactDOM.render 方法将 App 组件渲染到 HTML 中的 root 元素。

3. 项目的配置文件介绍

tailwind.config.js

这是 Tailwind CSS 的配置文件，内容如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

配置项说明：

• content：指定 Tailwind CSS 应该扫描哪些文件来查找类名。
• theme：自定义主题配置，extend 用于扩展默认主题。
• plugins：用于添加 Tailwind CSS 插件。

package.json

项目的配置文件，部分内容如下：

{
  "name": "cra-tailwindcss",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "tailwindcss": "^2.2.19"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

配置项说明：

• dependencies：项目依赖的第三方库。
• scripts：项目可运行的脚本命令。
  • start：启动开发服务器。
  • build：构建生产版本。
  • test：运行测试。
  • eject：弹出 react-scripts 配置，允许自定义 Webpack 配置。

通过以上介绍，您应该对如何使用和配置这个项目有了基本的了解。接下来，您可以按照这些步骤进行项目的启动和开发。

cra-tailwindcss Integrate Tailwind CSS in a Create React App setup 项目地址: https://gitcode.com/gh_mirrors/cr/cra-tailwindcss