通过创建模板设置你的 ReactJS + Tailwind CSS 项目🔥

创建一个 React 应用

设置 Tailwind CSS

最后一部分 - 创建模板仓库以供稍后使用

创建模板

或者

嗨，我是 Shaan！
众所周知，Tailwind CSS 如今越来越流行，所以我决定尝试学习一下 Tailwind CSS。学习了一点儿，并用 Tailwind 创建了一个落地页后，我发现它很棒，于是决定在未来的 React 项目中使用 Tailwind。但是，用 React 配置 Tailwind 可不是一件容易的事。所以，我想为什么不创建一个模板仓库，让 ReactJS 初学者可以用来快速配置他们的项目呢？在本文中，我将详细演示如何配置你的 ReactJS + Tailwind CSS 项目，以及如何创建一个可用的模板仓库。

创建一个 React 应用

如果您还没有创建一个新的 React 应用程序，请先通过输入 create-react-app 来创建它。

npx create-react-app cra-tailwind-template
cd cra-tailwind-template

设置 Tailwind CSS

通过输入以下命令安装 Tailwind CSS -

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

配置 Craco

通过输入以下内容安装并配置 craco -

npm install @craco/craco

安装完成后，编辑package.json文件的“脚本”部分。

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

接下来，我们需要在项目根目录创建一个 craco.config.js 文件，并将tailwindcss和autoprefixer添加为 PostCSS 插件。

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

创建配置文件

接下来，我们必须像这样生成tailwind.config.js文件 -

npx tailwind init

这将在项目根目录创建一个tailwind.config.js文件。

编辑 tailwind.config.js 文件

接下来，我们需要编辑 tailwind.config.js 文件。使用组件路径配置“purge”选项，以便生产构建中所有未使用的样式都能被清除。

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, 
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

在 CSS 中包含 Tailwind

打开src/index.css并使用@tailwind指令包含以下内容。

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

最后将index.css包含在src/index.css文件中。

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

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

就是这样。这就是我们用 Tailwind CSS 配置 ReactJS 的方法。

最后一部分 - 创建模板仓库以供稍后使用

在本节中，我将向您展示如何创建一个模板存储库，您可以在将来使用它，这样您就不必从头开始设置。

初始化 git 存储库。

键入以下命令来创建一个空的 git repo。

git init

提交更改

将文件添加到暂存区，然后提交更改。

git add .
git commit -m 'initial commit'

将代码移动到 GitHub。

登录你的 GitHub 帐户，创建一个新的 repo，然后点击右上角的“+”图标。为你的 repo 命名（例如：react-tailwind-template）。 命名后，你将看到类似下图所示的界面。 现在，在你的终端中输入以下命令：

git remote add origin https://github.com/shaan71845/react-tailwind-template.git
git push -u origin main

您已成功将代码上传至 GitHub！！

创建模板

完成上述步骤后，您将被重定向到您的存储库。单击“设置”选项卡，然后选中“模板存储库”选项。

或者

您可以使用我的模板仓库来配置您的 ReactJS + Tailwind CSS 项目。
链接 👇
https://github.com/shaan71845/cra-tailwind-template

点击“用作模板”即可使用此模板。
欢迎留下⭐