如何使用React和Tailwind CSS构建网站（） _React和TailwindCSS构建网站实例

本教程展示了如何使用 React 和 Tailwind CSS 创建产品网站。我们将介绍如何使用创建 React 应用程序配置覆盖 (CRACO)使用 Tailwind CSS 设置 React ；Tailwind 的 CSS 实用程序类和变体以及如何使用它们；如何轻松使网站暗模式兼容；什么是群体；以及如何启用变体，包括详细的React和Tailwind CSS构建网站实例。
如何使用React和Tailwind CSS构建网站？你可以在此处查看我们正在创建的网站的演示，并且可以在此 GitHub 存储库中找到此存储库的代码。
React和Tailwind CSS构建网站教程准备在开始之前，你需要安装Node.js和npm。如果你安装了 Node.js，那么你将安装 npm。
要检查是否安装了 Node，请在命令行中运行以下命令：

node -v

你应该能够看到版本。对 npm 执行相同的操作：

npm -v

需要注意的是，Tailwind CSS需要Node.js 版本 12.13.0 或更高版本。
如果你遇到任何一个错误，那么你必须安装 Node.js。你可以按照 Node网站上的安装说明进行操作，也可以按照我们的文章“使用 nvm 安装多个版本的 Node.js ”进行操作。
设置 React 和 Tailwind CSS注意：如果你不熟悉 Create React App，请先查看“ Create React App: Get React Projects Ready Fast ”。
React和Tailwind CSS构建网站实例：首先，使用以下命令创建一个 React 项目create-react-app：

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 所必需的。
React和Tailwind CSS构建网站教程：设置 CRACO通常，要配置 CRA，你需要运行react-scripts eject或npm run eject使用 CRA 的默认脚本。但是，这非常不方便，因为它会将隐藏在 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" },

我们已经在,和脚本中替换react-scripts了。我们没有对脚本进行任何更改。cracostartbuildtesteject
接下来，craco.config.js在项目的根目录中创建 CRACO 配置文件：

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: [ ], }

以下是每个配置键的含义：

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

现在，我们只做两个更改。首先，我们将更改purge密钥：

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

这告诉顺风CSS翻阅所有js，jsx，ts和tsx中的文件src目录中，public/index.html文件找出哪些类将会从顺风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.css在src/index.js：

import './index.css';

这意味着 Tailwind CSS 样式将应用到我们的 React 项目中，我们准备开始构建一个漂亮的网站！
了解 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>

以下是此示例中每个类的含义：

border: 设置边框宽度为 1px
border-red-100: 将边框颜色设置为红色（基于主题）
text-lg: 给出字体大小1.125rem和行高1.75rem
bg-red-400: 将背景颜色设置为红色（基于主题）
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>

这个应用w-1/2类（这意味着width: 50%当）min-width: 1025px适用于当前屏幕的宽度，应用w-3/4类（这意味着width: 80%当）min-width: 768px适用于当前屏幕的宽度，并应用w-full类（这意味着

width: 100%;

）当其他变体不要再申请。
这无疑使你在每个项目中必须完成的繁琐工作变得更加轻松快捷。起初，它可能看起来令人困惑，但是当你开始更多地涉足它时，你会意识到使用实用程序类和变体是如何成为第二天性的。
你可以在项目的官方文档中阅读有关配置 Tailwind 的更多信息。
React和Tailwind CSS构建网站实例：实现我们的组件回到我们的网站。我们正在创建一个简单的网站，它将以简洁的设计展示产品。为简单起见，我们将使用来自Fake Store API 的假数据。我们将采用示例 JSON 响应，而不是实际执行对 API 的请求，并将其放置在我们项目的 JSON 文件中。同样，这只是为了本教程的简单性。
转到产品端点并复制响应。然后，创建文件src/data/products.json并将响应粘贴到其中。它应该是一个类似于以下的对象数组：

{ "id": 1, "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops", "price": 109.95, "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday", "category": "men's clothing", "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg" }

让我们从实现Product组件开始。此组件将是一个卡片组件，用于显示有关产品的信息。src/components/Product.js使用以下内容创建：

function Product ({product: {title, price, description, category, image}}) { return ( < div> < div style={{backgroundImage: `url(${image})`}}>< /div> < div> < h1>{title.substr(0, 50)}< /h1> < h3>{category}< /h3> < p>{price}$< /p> < div>{description.substr(0, 100)}< /div> < /div> < /div> ); }export default Product;

如你所见，该Product组件仅显示产品详细信息。我们目前还没有添加任何样式类。
接下来，转到src/App.js并将内容更改为以下内容：

import "./App.css"; import Product from "./components/Product"; import products from "./data/products.json"; function App() { return ( < div> < div> {products.map((product) => ( < Product product={product} key={product.id} /> ))} < /div> < /div> ); }export default App;

在这里，我们将products.json文件导入为products. 然后，我们products使用Product我们之前创建的组件循环并显示每个产品。再次注意，我们没有添加任何样式类。
现在让我们启动服务器。运行以下命令：

npm start

你会看到只有一堆文本，但没有任何样式。

文章图片
添加一些背景颜色
让我们开始添加一些样式。首先，我们将更改页面的背景颜色。为此，我们将利用 Tailwind 的背景颜色类。背景颜色类的格式为bg-{color}-{numericScale}，其中numericScale是可选的。
默认情况下，颜色可为white，black，gray，red，blue，green，yellow，orange，indigo，purple和pink。数字标度定义了颜色的深浅，其中50最浅的深浅和900最深的深浅。例如，如果你希望背景颜色为浅红色，则可以使用bg-red-200.
在我们的网站中，我们将背景颜色设置为浅灰色，因此我们将类添加bg-gray-200到最外层

<
div>

元素中src/App.js：

return ( < div className="bg-gray-200"> < div> {products.map((product) => ( < Product product={product} key={product.id} /> ))} < /div> < /div> );

如果你现在检查网站（如果你的服务器没有仍在运行，请确保再次运行它），你会看到背景已更改为浅灰色。

文章图片
更改内容宽度
接下来我们要做的是在屏幕宽度至少为时将内容的宽度更改为屏幕实际宽度的 50% 768px，但在小型设备上保持全宽。我们将利用 Tailwind 的宽度类，我们之前已经讨论过了。宽度类的格式为w-{size}，其中size可以是 0 到 96 的范围，指的是中的值rem；像1/2或之类的比率3/5，或其他指百分比的比率；或关键字，如auto自动宽度或full100% 宽度。
要指定根据屏幕尺寸的宽度，我们使用像变种sm，md，lg等这些变体指定的需要的以应用规则的最小屏幕尺寸。
在我们的例子中，由于我们希望宽度至少为 50% 的屏幕宽度为父级768px，我们将使用md带有的变体w-1/2：

return ( < div className="bg-gray-200"> < div className="md:w-1/2"> {products.map((product) => ( < Product product={product} key={product.id} /> ))} < /div> < /div> );

现在宽度将更改为屏幕宽度的一半。但是，将其水平居中会好得多。为此，我们将使用 Tailwind 的边距实用程序类。边距类的格式为m{side}-{value}，其中side是可选的，并且可以特定于元素的每一侧，例如t顶部、b底部、l左侧和r右侧，或者特定的水平使用y，或垂直使用x。value可以在 0 到 96 的范围内，可以仅px用于1px或auto。不仅如此，你还可以通过添加-到类的开头来添加负边距。例如，-m-2。
由于我们将元素水平居中，我们将使用mx-auto：

return ( < div className="bg-gray-200"> < div className="md:w-1/2 mx-auto"> {products.map((product) => ( < Product product={product} key={product.id} /> ))} < /div> < /div> );

你可以看到它是居中的。

文章图片
设计产品组件
如何使用React和Tailwind CSS构建网站？现在让我们继续讨论Product组件。我们还将为产品卡添加背景颜色。我们将其设置为白色，因此我们将使用bg-white. 我们还将使其全宽，因此我们将使用w-full. 为了将产品卡彼此分开，我们将使用mb-5以下方法为元素添加边距底部：

return ( < div className="bg-white w-full mb-5"> < div style={{backgroundImage: `url(${image})`}}>< /div> < div> < h1>{title.substr(0, 50)}< /h1> < h3>{category}< /h3> < p>{price}$< /p> < div>{description.substr(0, 100)}< /div> < /div> < /div> );

你可以在网站上看到变化：

文章图片
正如你在我们的Product组件中看到的那样，在最外层的元素中，我们有两个元素，一个包含产品的背景图像，另一个包含信息。我们希望将它们并排显示。我们需要做的第一件事是将最外层的显示更改

<
div>

为 flex。为此，我们将使用 Tailwind 的显示类。与我们之前提到的类不同，显示类没有格式。它们只是我们想要的显示器的名称。因此，要将元素的 display 属性更改为flex，只需添加flex类：

return ( < div className="flex bg-white w-full mb-5"> < div style={{backgroundImage: `url(${image})`}}>< /div> < div> < h1>{title.substr(0, 50)}< /h1> < h3>{category}< /h3> < p>{price}$< /p> < div>{description.substr(0, 100)}< /div> < /div> < /div> );

接下来，我们将

<
div>

像以前一样使用宽度类更改元素的宽度：

return ( < div className="flex bg-white w-full mb-5"> < div style={{backgroundImage: `url(${image})`}} className="w-5/12">< /div> < div className="w-7/12"> < h1>{title.substr(0, 50)}< /h1> < h3>{category}< /h3> < p>{price}$< /p> < div>{description.substr(0, 100)}< /div> < /div> < /div> );

如果你现在查看网站，你会看到图像和文本现在彼此相邻。

文章图片
React和Tailwind CSS构建网站教程：添加一些间距
还有很多需要解决。首先，让我们为产品信息容器添加一些填充。为此，我们将使用 Tailwind 的填充类。填充类与我们之前检查的边距类完全相似，除了我们使用p代替m。
因此，我们将添加p-5到产品信息容器中。我们还将使用mt-4以下方法为描述容器添加一些边距：

return ( < div className="flex bg-white w-full mb-5"> < div style={{backgroundImage: `url(${image})`}} className="w-5/12">< /div> < div className="w-7/12 p-5"> < h1>{title.substr(0, 50)}< /h1> < h3>{category}< /h3> < p>{price}$< /p> < div className="mt-4">{description.substr(0, 100)}< /div> < /div> < /div> );

我们还将为整个容器添加顶部和底部边距，src/App.js以便第一个和最后一个产品从两侧都不会正好位于页面边缘。为此，我们将添加类py-4：

return ( < div className="bg-gray-200 py-4"> < div className="md:w-1/2 mx-auto"> {products.map((product) => ( < Product product={product} key={product.id} /> ))} < /div> < /div> );

我们将看到该网站现在开始变得更好。

文章图片
React和Tailwind CSS构建网站实例：改进组件的排版
现在让我们稍微处理一下排版。你可以看到产品信息看起来都一样。我们无法从描述等中区分标题与类别。首先，让我们更改一些文本的颜色。为此，我们将使用 Tailwind 的文本颜色类。这些类的格式类似于背景颜色类，但替换b为text. 例如，要使文本的颜色为绿色，请添加类text-green-100.
因此，让我们将类别的文本颜色更改text-gray-400为使其与其他文本相比略微褪色，让我们将价格文本颜色更改text-red-500为使其突出。我们还将为价格增加一个最高利润，以确保它最突出：

return ( < div className="flex bg-white w-full mb-5"> < div style={{backgroundImage: `url(${image})`}} className="w-5/12">< /div> < div className="w-7/12 p-5"> < h1>{title.substr(0, 50)}< /h1> < h3 className="text-gray-400">{category}< /h3> < p className="text-red-400 mt-4">{price}$< /p> < div className="mt-4">{description.substr(0, 100)}< /div> < /div> < /div> );

如果你现在访问该网站，你会看到文字在区分不同部分方面看起来更清晰一些：

文章图片
接下来，让我们更改字体大小。为此，我们将使用 Tailwind 的字体大小类。这些类的格式是text-{size}，其中size范围从sm到9xl。
我们将通过text-4xl为至少768px使用md变体的具有宽度的text-xl屏幕和较小的屏幕添加类来使价格的字体大小更大，我们将通过text-2xl为具有宽度的屏幕添加类来使标题更大至少768px也是：

return ( < div className="flex bg-white w-full mb-5"> < div style={{backgroundImage: `url(${image})`}} className="w-5/12">< /div> < div className="w-7/12 p-5"> < h1 className="md:text-2xl">{title.substr(0, 50)}< /h1> < h3 className="text-gray-400">{category}< /h3> < p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$< /p> < div className="mt-4">{description.substr(0, 100)}< /div> < /div> < /div> );

文字现在看起来好多了。

文章图片
定位产品图片
接下来，让我们修复图像以使其完全显示并正确定位背景图像。
首先，我们将更改背景图像大小。为此，我们将使用 Tailwind 的背景尺寸类。这些类的格式是bg-{size}, wheresize可以是auto,contain或cover。在我们的例子中，将bg-contain确保可以看到整个图像。
其次，我们将更改背景重复的属性以确保图像不会重复多次。为此，我们将使用 Tailwind 的背景重复类。这些类的格式是bg-{repeatValue}，其中repeatValue是你赋予background-repeat属性的bg-repeat-round值，或舍入值和bg-repeat-space空间值。在我们的例子中，我们将使用bg-no-repeat.
第三，我们将更改背景位置属性，使图像始终居中。为此，我们将使用 Tailwind 的背景位置类。这些类的格式是bg-{position}，position你要赋予background-position属性的值在哪里。我们将添加类bg-center：

return ( < div className="flex bg-white w-full mb-5"> < div style={{backgroundImage: `url(${image})`}} className="w-5/12 bg-contain bg-no-repeat bg-center">< /div> < div className="w-7/12 p-5"> < h1 className="md:text-2xl">{title.substr(0, 50)}< /h1> < h3 className="text-gray-400">{category}< /h3> < p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$< /p> < div className="mt-4">{description.substr(0, 100)}< /div> < /div> < /div> );

现在，我们可以完整地看到图像。

文章图片
你会注意到一些图像触及容器的边缘。为了解决这个问题，我们将向

<
div>

背景图像元素添加一个包装元素并为其添加一些填充：

return ( < div className="flex bg-white w-full mb-5"> < div className="w-5/12 p-2"> < div style={{backgroundImage: `url(${image})`}} className="bg-contain bg-no-repeat bg-center w-full h-full">< /div> < /div> < div className="w-7/12 p-5"> < h1 className="md:text-2xl">{title.substr(0, 50)}< /h1> < h3 className="text-gray-400">{category}< /h3> < p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$< /p> < div className="mt-4">{description.substr(0, 100)}< /div> < /div> < /div> );

请注意，我们已经将之前赋予背景图像的宽度移动到包装元素，并且我们已经将w-full和添加h-full到背景图像元素以确保它采用100%其父元素的宽度和高度。
添加框阴影和圆角
我们的产品现在看起来好多了。我们将为当前样式添加两个最后的润色。首先，我们将为每个产品添加一些阴影。我们将使用 Tailwind 的box shadow类。这些类的格式是shadow-{size}， wheresize是可选的，范围从sm到2xl。也可以none是去除任何框阴影或inner将阴影置于内部。其次，我们将使产品卡的边框有点圆。我们将使用 Tailwind 的边界半径类。这些类的格式rounded-{position}-{size}，其中size是可选的，可以从范围sm到3xl或可none为0边界半径或full使其充分圆润。position也是可选的，可以是特定位置，如t顶部或l左侧，也可以特定于某个边缘，如tl左上角。
我们将添加shadow-sm到产品卡中，为其添加一个小阴影，rounded-lg并使边框变圆：

return ( < div className="flex bg-white w-full mb-5 shadow-sm rounded-lg"> < div className="w-5/12 p-2"> < div style={{backgroundImage: `url(${image})`}} className="bg-contain bg-no-repeat bg-center w-full h-full">< /div> < /div> < div className="w-7/12 p-5"> < h1 className="md:text-2xl">{title.substr(0, 50)}< /h1> < h3 className="text-gray-400">{category}< /h3> < p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$< /p> < div className="mt-4">{description.substr(0, 100)}< /div> < /div> < /div> );

最后，我们的产品列表页面看起来像下面的截图。

文章图片
自定义主题如何使用React和Tailwind CSS构建网站？到目前为止，我们所做的所有样式都基于 Tailwind 的默认样式。但是，Tailwind 还允许我们自定义主题。我们可以更改颜色、字体系列等。所有这些更改都是在tailwind.config.js.
让我们试着稍微改变一下颜色。有多种方法可以更改主题的颜色。
一种方法是定义你自己的颜色。例如，要为我们的主题添加新颜色，我们可以在中执行以下操作tailwind.config.js：

module.exports = { purge: [ "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], darkMode: "media", // or 'media' or 'class' theme: { extend: { colors: { turquoise: "#40e0d0" } }, }, variants: { extend: {}, }, plugins: [ ], };

请注意，在 inside 中theme.extend，我们添加了一个colors对象，然后在其中添加了turquoise带有绿松石色十六进制代码的键。现在我们可以像使用默认颜色一样使用该颜色。例如，要将背景颜色设置为绿松石色，你可以使用bg-turquoise.
另一种自定义主题颜色的方法是更改??默认颜色。正如前面提到的，在顺风默认的颜色white，black，gray，red，blue，green，yellow，orange，indigo，purple和pink。你可以更改这些颜色的实际值。
例如，要将更改yellow为更多的芥末黄，请执行以下操作：

module.exports = { purge: [ "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], darkMode: "media", // or 'media' or 'class' theme: { extend: { colors: { yellow: "#e1ad01" } }, }, variants: { extend: {}, }, plugins: [ ], };

现在，当你使用黄色的默认类时，你将获得你在此处定义的黄色。你还可以使用数字刻度为不同的颜色深浅指定值：

module.exports = { purge: [ "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], darkMode: "media", // or 'media' or 'class' theme: { extend: { colors: { yellow: { 200: "#feca1d", 400: "#e1ad01", 700: "#b48a01" } } }, }, variants: { extend: {}, }, plugins: [ ], };

你还可以使用诸如lightest, light, DEFAULT, dark, 之类的键darkest：

module.exports = { purge: [ "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], darkMode: "media", // or 'media' or 'class' theme: { extend: { colors: { yellow: { light: "#feca1d", DEFAULT: "#e1ad01", dark: "#b48a01" } } }, }, variants: { extend: {}, }, plugins: [ ], };

添加调色板
React和Tailwind CSS构建网站实例：更改颜色的第三种方法是使用Tailwind CSS 中的其他调色板，这就是我们将要做的。
首先，需要colors从tailwindcss/colors开始tailwind.config.js：

const colors = require("tailwindcss/colors")

接下来，我们将红色更改为玫瑰调色板，将灰色更改为蓝灰色：

const colors = require("tailwindcss/colors")module.exports = { purge: [ "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], darkMode: "media", // or 'media' or 'class' theme: { extend: { colors: { gray: colors.blueGray, red: colors.rose } }, }, variants: { extend: {}, }, plugins: [ ], };

如果你现在查看网站，你会发现我们使用的颜色略有变化。

文章图片
如果你想很好地看到颜色的差异，你可以尝试将灰色改为琥珀色：

const colors = require("tailwindcss/colors")module.exports = { purge: [ "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], darkMode: "media", // or 'media' or 'class' theme: { extend: { colors: { gray: colors.amber, red: colors.rose } }, }, variants: { extend: {}, }, plugins: [ ], };

你会看到背景现在是黄色的。
你还可以更改字体系列等等，所有这些都来自tailwind.config.js，同时仍然使用 Tailwind CSS 提供的相同类。这样，你可以轻松自定义主题以适合你的设计。
添加深色模式该dark变体允许我们轻松地为暗模式设置元素样式，同时为亮模式设置样式。
一开始，当我们建立我们的网站，我们改变了dark重点tailwind.config.js来media。这意味着当浏览器或操作系统设置为暗模式时将应用暗模式。
如果你想测试网站在暗模式下的外观，但没有将其设置为暗模式，则可以在 Chrome DevTools 中进行模拟。按打开 DevTools F12，然后按CTRL+ SHIFT+ P（或macOS 上的CMD+ SHIFT+ P）并在出现的下拉列表中输入“显示渲染”并选择显示的选项。最后，向下滚动到“模拟 CSS 媒体功能首选颜色方案”并选择prefers-color-scheme: dark。通过选择，可以执行相同的操作来测试灯光模式prefers-color-scheme: light。
让我们首先通过添加类dark:bg-gray-800在黑暗模式下更改网站的背景颜色src/App.js：

return ( < div className="bg-gray-200 py-4 dark:bg-gray-800"> < div className="md:w-1/2 mx-auto"> {products.map((product) => ( < Product product={product} key={product.id} /> ))} < /div> < /div> );

如果你现在检查并且你的浏览器/操作系统设置为暗模式（或模拟），你将看到背景颜色已更改为更深的灰色阴影。

文章图片
现在让我们对产品卡进行更改。我们将类添加dark:bg-gray-300到最外层元素：

return ( < div className="flex bg-white w-full mb-5 shadow-sm rounded-lg dark:bg-gray-300"> < div className="w-5/12 p-2"> < div style={{backgroundImage: `url(${image})`}} className="bg-contain bg-no-repeat bg-center w-full h-full">< /div> < /div> < div className="w-7/12 p-5"> < h1 className="md:text-2xl">{title.substr(0, 50)}< /h1> < h3 className="text-gray-400">{category}< /h3> < p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$< /p> < div className="mt-4">{description.substr(0, 100)}< /div> < /div> < /div> );

如果你现在检查，你会注意到产品卡的背景颜色已更改，但你还会注意到图像现在看起来不太好，因为它具有白色背景。

文章图片
让我们通过在黑暗模式下为背景包装器添加白色背景来使其更好。这可以通过添加类来完成dark:bg-white。此外，类别文本颜色现在几乎不可见，因此我们将通过添加类将其更改为更暗的颜色dark:text-gray-700：

return ( < div className="flex bg-white w-full mb-5 shadow-sm rounded-lg dark:bg-gray-300"> < div className="w-5/12 p-2 dark:bg-white rounded-tl-lg rounded-bl-lg"> < div style={{backgroundImage: `url(${image})`}} className="bg-contain bg-no-repeat bg-center w-full h-full">< /div> < /div> < div className="w-7/12 p-5"> < h1 className="md:text-2xl">{title.substr(0, 50)}< /h1> < h3 className="text-gray-400 dark:text-gray-700">{category}< /h3> < p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$< /p> < div className="mt-4">{description.substr(0, 100)}< /div> < /div> < /div> );

我们网站的最终外观如下所示。

文章图片
为插件分组和启用变体默认情况下，并非所有插件都启用了某些变体，因为这会导致文件变大。因此，如果我们需要使用这些变体，我们必须为tailwind.config.js我们想要的插件手动启用它们。这里的插件是我们一直在使用的类。例如，背景颜色属于backgroundColor插件。
未启用的变体之一是group-hover。组是一组组合在一起的元素，因此任何状态（例如，悬停）都可以影响整个组。通过将group类添加到容器来声明组。然后，你可以将该group-hover变体与作为容器子元素的元素上的一个实用程序类一起使用。group-hover除非悬停组中的任何元素（即容器元素内的任何元素），否则不会应用你使用的实用程序类。
我们将制作每张产品卡片 a group，然后在悬停时我们将放大图像。因此，我们将group类Product添加到组件中的最外层元素，然后将以下类添加到具有背景图像的元素：

transition-transform：Tailwind 的过渡类之一。它仅将transition属性应用于transform更改。
duration-300：Tailwind 的过渡持续时间类之一。它应用了一个transition-duration值300ms。
group-hover:transform: 如上所述，group-hovervariant 确保transform类仅在组中的元素悬停时应用。transform是 Tailwind 的转换类之一。它允许添加其他与转换相关的类。
group-hover:scale-125：scale-125该类是 Tailwind 的规模类之一。它将scaleX 和 Y 的都设置为1.25，但你需要先添加transform类。

使用上述类，一旦产品中的任何元素悬停，图像就会放大。我们还将将该类添加overflow-hidden到Product组件的最外层元素，以确保如果图像超出其容器，则不会溢出。我们还将使用hover:shadow-2xl使产品卡的阴影更大transition-shadow duration-300，以确保过渡是无缝的：

return ( < div className="flex bg-white w-full mb-5 shadow-sm rounded-lg dark:bg-gray-300 group overflow-hidden hover:shadow-2xl transition-shadow duration-300"> < div className="w-5/12 p-2 dark:bg-white rounded-tl-lg rounded-bl-lg"> < div style={{backgroundImage: `url(${image})`}} className="bg-contain bg-no-repeat bg-center w-full h-full transition-transform duration-300 group-hover:transform group-hover:scale-125">< /div> < /div> < div className="w-7/12 p-5"> < h1 className="md:text-2xl">{title.substr(0, 50)}< /h1> < h3 className="text-gray-400 dark:text-gray-700">{category}< /h3> < p className="text-red-400 mt-4 text-xl md:text-4xl">{price}$< /p> < div className="mt-4">{description.substr(0, 100)}< /div> < /div> < /div> );

注意：如果你正在模拟暗模式（或使用暗模式），你可能会在亮模式下看到更好的效果，因此请确保切换到亮模式。
如果你现在尝试将鼠标悬停在产品上，你会看到阴影放大并且图像放大。

文章图片

React和Tailwind CSS构建网站实例

React和Tailwind CSS构建网站教程结论【如何使用React和Tailwind CSS构建网站（）】如何使用React和Tailwind CSS构建网站？我们使用 React 创建了一个简洁的响应式网站，而无需编写任何 CSS！这就是 Tailwind CSS 的魅力所在。Tailwind CSS 消除了乏味、重复的工作或编写 CSS。它还有助于创建主题，并允许你专注于创建具有时尚设计的可重用组件，这非常适合 React。我们在本文中介绍的内容只是触及了你可以使用 Tailwind CSS 轻松创建的所有美丽事物的表面。