如何使用React和Tailwind CSS建立一个网站

热门技术勘探工
789 阅读7分钟

Build a Website with React and Tailwind CSS

本教程展示了如何使用React和Tailwind CSS创建一个产品网站。我们将介绍如何使用Create React App Configuration Override（CRACO）设置React与Tailwind CSS；Tailwind的CSS实用类和变体以及如何使用它们；如何轻松使网站兼容黑暗模式；什么是组；以及如何启用变体。

你可以在这里查看我们正在创建的网站的演示，你可以在这个GitHub资源库中找到这个资源库的代码。

前提条件

在我们开始之前，你需要安装Node.js和npm。如果你安装了Node.js，那么你就会安装npm。

要检查Node是否已经安装，在命令行中运行以下内容。

node -v

你应该能看到版本。对npm做同样的操作。

npm -v

应该注意的是，Tailwind CSS需要Node.js的12.13.0或更高版本。

如果你得到一个错误，那么你必须要安装Node。你可以按照Node网站上的安装说明进行安装，或者你可以按照我们的文章《使用nvm安装多个版本的Node.js》进行安装。

设置React和Tailwind CSS

注意：如果你不熟悉Create React App，请查看《Create React App。先让React项目快速准备好"。

首先，用create-react-app 创建一个React项目。

npx create-react-app react-shop

然后，改变目录到创建的项目。

cd react-shop

接下来，我们将安装Tailwind CSS所需的依赖项。

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

我们要用PostCSS 7兼容性构建来安装Tailwind CSS，因为在写这篇文章时，Create React App（或CRA）并不支持PostCSS 8。我们还将安装autoprefixer ，因为在2.0版本之后，Tailwind CSS需要它。

设置CRACO

通常情况下，要配置CRA，你需要用CRA的默认脚本运行react-scripts eject 或npm run eject 。然而，这非常不方便，因为它将把所有隐藏在CRA中的配置（如webpack配置、Babel配置、PostCSS配置等等）弹出到你的项目中，而且编辑它可能会变得很麻烦，或者产生CRA将不再支持的问题。

这就是Create React App Configuration Override（或CRACO）出现的原因。CRACO是一个库，为CRA增加了一个简单的配置层。而不是将CRA内的所有配置弹出到你的项目中--例如，只是为了给Webpack添加一些配置--所有新的配置或对原始配置的更改将被放在一个新的文件中craco.config.js 。CRACO允许你对CRA进行配置，以获得它的最佳效果，而不需要麻烦。

我们在这里需要CRACO来覆盖PostCSS的配置并添加tailwindcss 插件。所以，我们先来安装它。

npm install @craco/craco

当使用CRA时，package.json 中的脚本看起来像这样。

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

由于我们要用CRACO来做默认情况下不能用CRA做的事情，所以我们需要改变脚本，以使用CRACO来构建项目或在开发中运行它。

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

我们在start,build 和test 脚本中用craco 替换了react-scripts 。我们没有对eject 脚本做任何修改。

接下来，在项目的根目录下创建CRACO配置文件craco.config.js 。

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

这个配置文件将tailwindcss 和autoprefixer 插件添加到postcss 。

现在，我们将为Tailwind CSS生成配置文件。

npx tailwindcss init

注意：如果你使用的是Node.js v14，有一个关于运行此命令时抛出的错误的报告问题，说 "无法找到模块'autoprefixer'"。更新到Node.js v15应该可以，但如果你无法做到这一点，请遵循这里的一个解决方法。

这将在项目的根部创建文件tailwind.config.js 。它将有以下内容。

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

下面是每个配置键的含义。

  1. purge：这是用来指定Tailwind CSS应该扫描的文件，看看哪些Tailwind CSS类正在被使用，以便它可以在生产中删除所有未使用的样式和类。
  2. darkMode：这指定了你项目中黑暗模式的行为。这个值可以是media - 意味着黑暗模式的样式将根据黑暗模式的媒体查询来应用，这取决于用户的操作系统的默认模式。它也可以是class ，这意味着当HTML文档中的父元素具有dark 类别时，黑暗模式的样式将被应用。
  3. theme样式：这可以用来修改主题的调色板、字体、断点等。我们将在本教程的后面看到如何对主题进行修改。
  4. variants变化：这允许你对Tailwind CSS的核心插件应用额外的变体。我们将在本教程的后面看到它是如何工作的。
  5. plugins：这是一个添加插件的部分，可以添加额外的实用类、自定义变体、基本样式或更多。

现在，我们只做两个改动。首先，我们将改变purge 键。

purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],

这告诉Tailwind CSS在src 目录中查看所有js 、jsx 、ts 和tsx 文件，以及public/index.html 文件，以弄清哪些类将被Tailwind CSS使用，并删除任何未使用的类。

第二个变化将是针对黑暗模式。

darkMode: "media", // or false or 'class'

在本教程中，为了简单起见，我们将保持黑暗模式只是基于用户的操作系统偏好。

用Tailwind CSS设置我们的React项目的最后一步是将一些Tailwind CSS样式包含在src/index.css 。将该文件的内容替换为以下内容。

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

@tailwind 指令基本上将这些样式导入到index.css 。而默认情况下，CRA在src/index.js 中导入src/index.css 。

import './index.css';

这意味着Tailwind CSS样式将被应用到我们的React项目中，我们已经准备好开始建设一个漂亮的网站了!

了解Tailwind的CSS工具和变体

在进入编码之前，让我们了解一下什么是Tailwind CSS实用类和变体。Tailwind CSS的设计是为了使组件的造型更容易，并帮助您专注于制作可重复使用的组件。实用类是一个广泛的类，它允许你以任何你能想到的方式来样式你的组件，而无需编写任何CSS。

例如，要给一个<div> 元素加上边框、改变字体大小、改变背景和文本颜色的样式，你需要用CSS来写这样的东西。

div {
  border: 1px solid #f00;
  font-size: 15px;
  background-color: #ff007f;
  color: #fff;
}

使用Tailwind CSS，你只需使用实用类就可以做到这一点。

<div class="border border-red-100 text-lg bg-red-400 text-white">
</div>

下面是每个类在这个例子中的含义。

  1. border：设置边框宽度为1px
  2. border-red-100：将边框颜色设置为红色（基于主题）
  3. text-lg: 给出字体大小1.125rem 和行高1.75rem
  4. bg-red-400：将背景颜色设为红色（基于主题）。
  5. text-white设置文本颜色为白色

还有许多其他的类，你可以使用，也有许多不同的颜色色调，这使主题设计更容易。使用这些实用类，你很少需要实际编写任何CSS。

好吧，但是媒体查询呢？伪装类呢？黑暗模式呢？这些都可以在不需要自己写任何CSS的情况下完成吗？

这时，变体就出现了。变体允许你根据设备的断点、元素的状态、或是否启用黑暗模式来为元素添加样式。

因此，以前你可能会这样做，根据设备的大小来改变一个元素的宽度。

div {
  width: 50%;
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
  div {
    width: 80%;
  }
}

@media screen and (max-width: 767px){
  div {
    width: 100%
  }
}

有了Tailwind CSS，它可以简单地这样做。

<div class="w-full md:w-3/4 lg:w-1/2">
</div>

当min-width: 1025px 适用于当前屏幕宽度时，这将应用w-1/2 类（这意味着width: 50% ）；当min-width: 768px 适用于当前屏幕宽度时，将应用w-3/4 类（这意味着width: 80% ）；当其他变体不再适用时，将应用w-full 类（这意味着width: 100%; ）。

这无疑使你在每个项目中必须做的繁琐工作变得更加容易和快捷。起初，它可能看起来令人困惑，但当你开始更多地涉足它时，你会意识到它是如何成为使用实用类和变体的第二天性。

你可以在项目的官方文档中阅读更多关于配置Tailwind的信息。

继续阅读：在SitePoint 上用React和Tailwind CSS建立一个网站。

avatar
文章
阅读
粉丝