用React和Tailwind CSS构建网站

本教程展示了如何使用React和Tailwind CSS创建产品网站。我们将使用Create Apt App Configuration Override（Craco）介绍如何与Tailwind CSS建立React React； Tailwind的CSS公用事业课程和变体以及如何使用它们；如何轻松使网站Dark Mode兼容；哪些群体是；以及如何启用变体。

>您可以在此处查看我们要创建的网站的演示，并且可以在此GitHub存储库上找到此存储库的代码。

钥匙要点

• >利用创建React App和Craco设置React与Tailwind CSS有效地避免了手动配置的复杂性。
• >利用尾风CSS实用程序和变体可以轻松地样式组件，而无需编写广泛的自定义CSS。
• >在尾风CS中使用简单配置更改以适应用户的操作系统首选项。
>探索公用事业课程对响应式设计和伪级的力量，使样式更具动态和灵活性。
>通过直接在配置文件中修改颜色，字体和其他元素来自定义尾风的主题，以适应品牌需求。
• >
>使用尾风CSS插件，并扩展功能以包括其他样式，实用程序和自定义组件。
>启用特定的尾风CSS变体，以进行悬停状态和响应迅速调整，增强网站的交互式和响应性方面。

>先决条件

>在开始之前，您需要安装node.js和npm。如果已安装了node.js，则将安装NPM。

要检查是否安装了节点，请在命令行中运行以下内容：>

>您应该能够看到版本。对NPM进行相同的操作：

<span>node -v
</span>

应该注意的是，尾风CSS需要node.js版本12.13.0或更高。

>如果您遇到错误，则必须安装节点。您可以在节点网站上遵循安装说明，也可以关注我们的文章“使用NVM安装多个版本的node.js”。

<span>npm -v
</span>

设置React和Tailwind CSS

>

注意：如果您不熟悉Create React App，请查看“创建React App：快速获取React Projects”。

首先，使用Create-React-app创建一个React项目：>

然后，将目录更改为创建的项目：>

接下来，我们将安装尾风CSS所需的依赖项：> >我们正在使用PostCSS 7兼容性构建安装Tailwind CSS，因为创建React App（或CRA）在撰写本文时不支持PostCSS 8。我们还安装了自动改装器，因为版本2.0之后的Tailwind CSS所需

>设置Craco

通常，要配置CRA，您需要使用CRA的默认脚本运行反应式弹出或NPM运行弹出。但是，这是非常不便的，因为它将弹出所有隐藏在CRA中的配置（例如WebPack配置，Babel配置，PostCSS配置等），并将其编辑成麻烦或产生CRA的问题将不再能够支持。

这是创建React应用程序配置替代（或Craco）的地方。Craco是一个在CRA中添加简单配置层的库。与其将CRA内部的所有配置驱逐到项目中（例如，只是为了向WebPack添加一些配置），不如将所有新配置或原始配置的更改都放在新的文件craco.config.js中。 craco允许您配置CRA在没有麻烦的情况下从中获得最佳状态。

>

>我们在这里需要Craco来覆盖PostCSS配置并添加parwindcss插件。因此，让我们首先安装它：

<span>node -v
</span>

使用cra时，package.json中的脚本看起来像：>

<span>npm -v
</span>

>我们默认情况下使用Craco来完成我们无法使用CRA的事情，我们需要更改脚本以使用Craco来构建项目或开发项目：

>我们在开始，构建和测试脚本中用craco替换了反应书。我们没有对弹出脚本进行任何更改。

npx create-react-app react-shop

>

接下来，在项目根部创建craco配置文件craco.config.js：

此配置文件将parwindcss和autoprefixer插件添加到PostCSS。

<span>cd react-shop
</span>

现在，我们将生成用于尾风CSS的配置文件：>

>

注意：如果您使用的是node.js v14，则在运行此命令时会出现错误的问题，上面写着“找不到模块'autoprefixer'”。更新到node.js v15应该有效，但是如果您无法执行此操作，请在此处关注其中一个解决方法。

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

>

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

这是每个配置密钥的含义：

>

1. 清除：这用于指定文件尾风CS应该扫描并查看使用了哪些Tailwind CSS类，以便它可以删除所有未使用的样式和生产中的所有未使用的样式和类。
darkmode：这指定了项目中暗模式的行为。该值可以是媒体 - 这意味着将基于暗模式媒体查询应用暗模式样式，该查询取决于用户OS的默认模式。它也可以是类，这意味着当html文档中的父元素具有深色类时，将应用黑模式样式。
主题：可以用来修改主题，字体，断点等的调色板。我们将看到如何在教程稍后对主题进行更改。
>变体：这使您可以将其他变体应用于Tailwind CSS的核心插件。我们将在稍后在教程中查看其工作原理。
4. >
>插件：添加可以添加额外实用程序类，自定义变体，基本样式或更多插件的插件。
5. >

>目前，我们将进行两个更改。首先，我们将更改清除密钥：

<span>node -v
</span>

这告诉Tailwind CSS查看SRC目录中的所有JS，JSX，TS和TSX文件，以及public/index.html文件，以找出将从tailwind CSS中使用哪些类并删除任何未使用的类。

第二个更改将用于黑暗模式：

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

<span>npm -v
</span>

>用尾风CSS设置我们的React项目的最后一步是将一些tailwind CSS样式包括在src/index.css中。用以下内容替换此文件的内容：

> @TailWind指令基本上将样式导入index.css。默认情况下，src/index.js中的cra imports src/index.css：

npx create-react-app react-shop

这意味着将在我们的React项目中使用尾风CSS样式，我们已经准备好开始建立一个美丽的网站！

<span>cd react-shop
</span>

了解尾风CSS实用程序和变体

>进入编码之前，让我们了解哪些Tailwind CSS公用事业类和变体是什么。 Tailwind CSS旨在使造型组件变得更加容易，并帮助您专注于可重复使用的组件。公用事业课程是各种各样的课程，可让您在不编写任何CSS的情况下以任何方式为组件设计样式。

。

例如，要样式的带有边框的

元素，更改字体大小，更改背景和文本颜色，您需要用CSS写下类似的内容：

使用尾风CSS，您只需使用实用程序类：>

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

这是每个班级在此示例中的含义：

1. 边界：将边框宽度设置为1px
>
2. 边界红色100：将边框颜色设置为红色的红色（基于主题）
>
3. text-lg：给出字体尺寸1.125REM和线高1.75REM
4. > bg-red-400：将背景颜色设置为红色的阴影（基于主题）
>
5. 文本白色：将文本颜色设置为白色

>您还可以使用许多其他类别的颜色阴影，这使主题更容易。使用实用程序类，您几乎不需要真正编写任何CSS。

好吧，但是媒体查询呢？那Psoudo课程呢？那黑暗模式呢？这些可以做到而无需自己写任何CSS吗？

那是变体进来的时候。变体允许您根据设备断点，元素状态或是否启用了黑模式。

因此，以前您可能已经这样做是为了根据设备的大小更改元素的宽度：

>使用尾风CSS，可以简单地完成：

<span>node -v
</span>

>

>当最小宽度：1025px适用于当前屏幕宽度时，适用W-1/2类（这意味着宽度：50％） - 宽度：768px适用于当前屏幕宽度，并应用W-Full类（这意味着宽度：100％;）当其他变体不再适用时。

<span>npm -v
</span>

>这肯定会使您在每个项目中必须做的乏味的工作更加轻松，更快。起初，它看起来可能令人困惑，但是当您开始涉足它时，您会意识到使用实用程序类和变体是如何成为第二天性的。

>

>您可以在项目的官方文档中阅读有关配置tailwind的更多信息。

>

实现我们的组件

返回我们的网站。我们正在创建一个简单的网站，该网站将以整洁的设计显示产品。为简单起见，我们将使用Fake Store API的假数据。我们将采取示例JSON响应并将其放入项目中的JSON文件中，而不是实际执行对API的请求。同样，这仅仅是为了简单。

>

>转到产品端点并复制响应。然后，创建文件src/data/products.json并粘贴响应中。它应该是类似的一系列对象：

>

>让我们从实施产品组件开始。该组件将是显示有关产品的信息的卡组件。创建具有以下内容的SRC/组件/product.js：

如您所见，产品组件仅显示产品详细信息。目前我们尚未添加任何类型的课程。

npx create-react-app react-shop

>

接下来，转到src/app.js，然后将内容更改为以下内容：>

<span>node -v
</span>

>在这里，我们将products.json文件作为产品导入。然后，我们正在使用我们之前创建的产品组件来浏览产品并显示每个产品。同样，请注意，我们没有添加任何用于样式的课程。

>让我们立即启动服务器。运行以下命令：

<span>npm -v
</span>

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

添加一些背景颜色

>让我们开始添加一些样式。首先，我们将更改页面的背景颜色。为此，我们将利用Tailwind的背景颜色类。背景颜色类是格式bg- {color} - {numericscale}，其中numericscale是可选的。

默认情况下的颜色可以是白色，黑色，灰色，红色，蓝色，绿色，黄色，橙色，靛蓝，紫色和粉红色。数字刻度定义了颜色的阴影，其中50个是最轻的阴影，而900是最黑暗的。例如，如果您希望背景颜色为浅红色，则可以使用BG-RED-200。>

在我们的网站中，我们将背景颜色设置为浅灰色，因此我们将bg-gray-200类添加到src/app.js中的最外部

元素：

如果您现在检查网站（如果您还没有服务器仍在运行，请确保再次运行），您会发现背景已更改为灰色的浅色阴影。>

npx create-react-app react-shop

更改内容宽度

下一步，我们将要做的就是将内容的宽度更改为屏幕宽度至少为768px时屏幕实际宽度的50％，但在小型设备上保持完整宽度。我们将利用Tailwind的宽度课程，然后再进行一点。宽度类别为格式w- {size}，其中大小可以是0到96的范围，它指的是REM中的值； 1/2或3/5之类的比率，或其他比率是指一个百分比；或像自动宽度的自动宽度或100％宽度之类的关键字。 >要根据屏幕尺寸指定宽度，我们使用SM，MD，LG等的变体。这些变体指定应用规则所需的最小屏幕大小。

>

在我们的情况下，由于我们希望宽度为屏幕的50％的宽度至少为768px，因此我们将使用W-1/2的MD变体：

<span>node -v
</span>

>现在，宽度将更改为屏幕宽度的一半。但是，水平将其居中要好得多。为此，我们将使用Tailwind的保证金公用事业课程。保证金类是格式为m {side} - {value}，其中侧面是可选的，可以特定于元素的每一侧，例如t top t top t top t top t top t tot t tot t tot tots，l for Bottom，l for左和r，右侧为r，或特定水平使用y或垂直使用x。值可以在0到96的范围内，只能是1PX或自动的PX。不仅如此，您还可以通过添加 - 在课程的开头中添加负差。例如，-m -2。

由于我们水平居中元素，因此我们将使用MX-AUTO：

<span>npm -v
</span>

，您可以看到它的中心。

造型产品组件

>现在让我们继续进行产品组件。我们还将为产品卡添加背景颜色。我们将其变为白色，因此我们将使用BG-White。我们还将使其完整宽度，因此我们将使用W-Full。为了将产品卡彼此分开，我们将使用MB-5添加保证金底部：

>

您可以在网站上看到更改：

npx create-react-app react-shop

如您在我们的产品组件中所见，在最外层的元素中，我们有两个元素，一个具有产品的背景图像，另一个具有信息。我们想彼此显示它们。我们需要做的第一件事是将最外面

的显示更改为Flex。为此，我们将使用Tailwind的显示课程。与我们提到的以前的课程不同，显示课程没有格式。它们只是我们想要的显示的名称。因此，要将元素的显示属性更改为Flex，您只需添加Flex类：> 接下来，我们将使用以前的宽度类更改

元素的宽度：>

如果您立即检查网站，您会看到图像和文字现在相邻。

<span>cd react-shop
</span>

>

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

添加一些间距

>还有很多要解决的问题。首先，让我们为产品信息容器添加一些填充。为此，我们将使用Tailwind的填充课程。填充类与我们之前检查的边距类完全相似，除了我们使用p而不是m。> 因此，我们将在产品信息容器中添加P-5。我们还将使用MT-4添加一些余量：

>

>我们还将在src/app.js中的整个容器中添加顶部和底部边距，以便第一个也是最后一个产品不在双方的页面边缘。为此，我们将添加py-4类：

<span>node -v
</span>

我们将看到该网站现在开始看起来更好。

>

改进组件的版式

>现在让我们稍作研究版式。您可以看到产品信息看起来都一样。我们无法将标题与描述等类别区分开。首先，让我们更改一些文本的颜色。为此，我们将使用Tailwind的文本颜色类。这些类的格式类似于背景颜色类，但用文本替换B。例如，要使您的文本颜色绿色添加类Text-Green-100。 因此，让我们将类别的文本颜色更改为Text-Gray-400，以使其与其他文本相比有些淡出，然后让我们将价格文本颜色更改为Text-Red-500，以使其脱颖而出。我们还将在价格上添加最高利润，以确保其脱颖而出：>

如果您现在访问网站，您会发现文本在区分不同部分方面看起来更清晰：>

<span>npm -v
</span>

接下来，让我们更改字体大小。为此，我们将使用Tailwind的字体尺寸类。这些类的格式是文本 - {size}，其中大小从sm到9xl。

>我们将通过使用MD变体添加至少宽度为768px的屏幕的类Text-4xl，并使价格更大，而对于较小的屏幕，我们将制作标题通过添加具有至少768px的屏幕的类Text-2XL添加较大的较大

文本看起来现在好多了。

>

定位产品图像

npx create-react-app react-shop

接下来，让我们修复图像以使其完全出现并正确放置背景图像。

首先，我们将更改背景图像大小。为此，我们将使用Tailwind的背景大小类。这些类的格式是bg- {size}，其中大小可以自动，包含或覆盖。在我们的情况下，确保看到整个图像将是BG范围。

>第二，我们将更改背景重复的属性，以确保图像不会多次重复。为此，我们将使用Tailwind的背景重复课程。这些类的格式为bg- {repotvalue}，其中重复值是您要给背景重复属性的值，或者用于圆形值和BG重复空间的BG-REPEAT-ROUND，用于空间值。就我们而言，我们将使用BG-NO-REPEAT。第三，我们将更改背景位置属性，以使图像始终居中。为此，我们将使用Tailwind的背景位置类。这些类的格式是bg- {position}，其中位置是您给背景位置属性的价值。我们将添加BG中心类：

<span>node -v
</span>

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

>您会注意到一些图像触及容器的边缘。为了解决这个问题，我们将在背景图像元素中添加包装器

元素，并在其中添加一些填充：

请注意，我们已将以前给予的背景图像的宽度移至包装元素，并且已经在背景图像元素中添加了W- Full和H-Full，以确保其占其父母宽度的100％和高度。

<span>npm -v
</span>

添加盒子阴影和圆角

我们的产品现在看起来好多了。我们将为当前样式添加两个最终触摸。首先，我们将为每种产品添加一些阴影。我们将使用Tailwind的Box Shadow课程。这些类的格式是Shadow- {size}，其中大小是可选的，范围从SM到2xl。删除任何盒子的阴影或内在以使阴影内部内部也不是没有的。其次，我们将使产品卡的边框有些圆润。我们将使用Tailwind的边界半径课。这些类的格式是圆形的 - {position} - {size}，其中大小是可选的，可以从sm到3xl范围，或者无需0个边框半径或满足以使其完全圆形。位置也是可选的，可以是特定位置，例如t的t或左侧的t，也可以是特定于特定边缘的特定位置，例如tl for top top top top tl。

>我们将在产品卡中添加Shadow-SM，以向其添加一个小的阴影，然后将圆形lg添加到圆形上：

：

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

npx create-react-app react-shop

>

>自定义主题

到目前为止，我们所做的所有样式都是基于Tailwind的默认样式。但是，Tailwind还允许我们自定义主题。我们可以更改颜色，字体系列等。所有这些更改均在tailwind.config.js。

>让我们尝试更改颜色。有不同的方法可以改变主题的颜色。

>

做到这一点的一种方法是定义自己的颜色。例如，要在我们的主题中添加新颜色，我们可以在tailwind.config.js中进行以下操作：

请注意，内部主题。extend，我们添加了一个颜色对象，然后在内部添加了密钥绿松石，其中包含绿松石色的十六进制代码。现在，我们可以像使用默认颜色一样使用该颜色。例如，要将背景颜色设置为绿松石，您可以使用bg-turquoise。

>自定义主题颜色的另一种方法是更改​​默认颜色。如前所述，尾风中的默认颜色是白色，黑色，灰色，红色，蓝色，绿色，黄色，橙色，靛蓝，紫色和粉红色。您可以更改这些颜色的实际值。

> 例如，要将黄色更改为更多的芥末黄色，请执行此操作：

>

<span>node -v
</span>

现在，当您使用黄色的默认类时，您将在此处获得您定义的黄色。您还可以使用数字量表来指定颜色不同阴影的值：

>

<span>npm -v
</span>

>您也可以使用最轻，轻，默认，深色，最黑的键

添加调色板

npx create-react-app react-shop

改变颜色的第三种方法是使用Tailwind CSS中的其他调色板，这是我们要做的。

首先，在tailwind.config.js开头的tailwindcss/颜色上需要颜色：

接下来，我们将红色变成玫瑰色的调色板，然后灰色为蓝灰色：

<span>cd react-shop
</span>

现在，如果您现在检查网站，您会看到我们使用的颜色略有更改。

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

如果您想很好地看到颜色的差异，则可以尝试将灰色更改为琥珀色：

您会看到背景现在是黄色的。

>您还可以从tailwind.config.js更改字体系列，同时仍使用与Tailwind CSS相同的类。这样，您可以轻松自定义主题以适合您的设计。

添加暗模式

<span>npm install @craco/craco
</span>

黑暗的变体使我们能够轻松地为黑模式造型，同时我们将其定型为轻型模式。

>一开始，当我们设置网站时，我们将tailwind.config.js中的暗键更改为媒体。这意味着当浏览器或操作系统设置为“黑暗模式”时，将应用黑暗模式。>

>如果您想在黑暗模式下测试网站的外观，但没有设置为“黑暗模式”，则可以在Chrome Devtools中模仿它。按下

f12

，打开DevTools，然后按

ctrl

shift

p （或cmd> cmd shift shift shift >让我们从“黑暗”中更改网站的背景颜色，添加dark：src/app.js中的bg-gray-800：> 如果您立即检查并且浏览器/OS设置为“暗模式”（或模拟），您会发现背景颜色已更改为灰色的灰色阴影。

>现在，让我们对产品卡进行更改。我们将“黑暗”类添加到最外层的元素中：

<span>node -v
</span>

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

>让我们在深色模式下在背景包装器中添加白色背景来使其变得更好。这可以通过添加Dark：BG-White来完成。另外，类别文本颜色现在几乎看不见，因此我们将其更改为“黑暗类别：text-gray-700：

”，将其更改为更暗的事物。

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

<span>npm -v
</span>

>

组和启用插件的变体

>

默认情况下，所有插件都没有启用某些变体，因为这将导致较大的文件大小。因此，如果我们需要使用这些变体，则必须在tailwind.config.js中手动启用它们的插件。插件这是我们一直在使用的类。例如，背景颜色属于背景颜色插件。

>未启用的变体之一是群悬挂。一个组是许多要组合在一起的元素，因此任何状态（例如，悬停）都会影响整个组。通过将组类添加到容器中来声明组。然后，您可以在容器的孩子的元素上使用一个公用事业类之一。除非组中的任何元素（即容器元素内的任何元素）悬停在您使用的群悬挂的实用程序类。

>

>我们将使每张产品卡成为一个组，然后悬停在图像中。因此，我们将组类添加到产品组件中的最外部元素中，然后将其添加到具有以下类别的背景图像的元素：>

1. >过渡转变：尾风的过渡类之一。它应用过渡属性仅转换变化。
>
2. 持续时间300：Tailwind的过渡持续时间之一。它应用了一个价值300ms的过渡持续时间。
3. 组悬停：变换：如上所述，组悬挂的变体可确保仅当悬停在组中的元素时才能应用转换类。变革是尾风的转型课程之一。它允许添加其他转换相关类。
4. 组悬停：Scale-125：Scale-125类是Tailwind的秤类之一。它将x和y的比例设置为1.25，但是您需要先添加转换类。>

使用上述类，一旦产品中的任何元素徘徊，图像就会放大。我们还将将类溢出添加到产品组件中的最外层元素中，以确保如果图像在其容器之外生长，则不会溢出。我们还将使用Hover：Shadow-2XL使用过渡阴影持续时间-300的产品卡的阴影更大，以确保过渡是无缝的：

>

<span>node -v
</span>

注意：如果您要模拟暗模式（或使用暗模式），则可能在光模式下看到效果更好，因此请确保切换到光模式。

如果您现在尝试徘徊在产品上，您会发现阴影放大和图像将放大。

结论

>我们已经创建了一个整洁，响应式的网站，而无需编写任何CSS！那就是尾风CSS的魔力。 Tailwind CSS消除了乏味，重复的工作或写作CSS。它还可以促进创建主题，并让您专注于以光滑的设计创建可重复使用的组件，非常适合反应。我们在本文中介绍的只是刮擦所有您可以轻松创建的所有美丽事物的表面。

在使用tailwind

的反应上，

>常见问题解答

>什么是尾风CSS，为什么要与React一起使用它？

> tailwind CSS是一种实用第一的CSS框架，提供了一组用于造型Web应用程序的预定类别的类。使用带有React的尾风CS可以加快开发过程并保持一致的设计系统。

>如何将尾风CSS与React项目集成在一起？

>您可以通过与NPM或YARN安装并配置您的构建过程来处理Tailwind CSS类。

>我可以使用Create React App（Cra）与尾风CSS？

是的，您可以将tailwind CSS与Create React App一起使用。有几种方法，包括craco配置或react-scripts Postcs设置，以使其无缝工作。

>

>

如何将尾风CSS类应用于我的反应组件？

>您可以使用ClassName Prop直接将Tailwind CSS类直接应用于您的React组件。例如，

你好，tailwind！

。

在与React的TailWind CSS中使用效用类别有什么好处？

使用实用程序类可以使您的反应组件更加简洁，并促进了一致的设计系统。它还简化了响应式设计并鼓励可重复使用性。

>如何在带有React组件的尾风CS中使用响应式类别？

> tailwind CSS提供响应式类，使您可以为各种屏幕尺寸定义不同的样式。您可以通过附加MD（例如MD：您的类定义）的断点来使用这些类。

>是否有对与React一起使用Tailwind CSS的局限性或缺点？

>虽然Tailwind CSS功能强大，但如果您不小心的类使用情况，它可能会导致更大的文件大小。对于喜欢与传统CSS合作的设计师而言，这也可能具有挑战性。

以上是用React和Tailwind CSS构建网站的详细内容。更多信息请关注PHP中文网其他相关文章！