本教程展示了如何使用React和Tailwind CSS创建产品网站。我们将使用Create Apt App Configuration Override(Craco)介绍如何与Tailwind CSS建立React React; Tailwind的CSS公用事业课程和变体以及如何使用它们;如何轻松使网站Dark Mode兼容;哪些群体是;以及如何启用变体。
>您可以在此处查看我们要创建的网站的演示,并且可以在此GitHub存储库上找到此存储库的代码。
要检查是否安装了节点,请在命令行中运行以下内容:
>您应该能够看到版本。对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所需的依赖项: 通常,要配置CRA,您需要使用CRA的默认脚本运行反应式弹出或NPM运行弹出。但是,这是非常不便的,因为它将弹出所有隐藏在CRA中的配置(例如WebPack配置,Babel配置,PostCSS配置等),并将其编辑成麻烦或产生CRA的问题将不再能够支持。 这是创建React应用程序配置替代(或Craco)的地方。Craco是一个在CRA中添加简单配置层的库。与其将CRA内部的所有配置驱逐到项目中(例如,只是为了向WebPack添加一些配置),不如将所有新配置或原始配置的更改都放在新的文件craco.config.js中。 craco允许您配置CRA在没有麻烦的情况下从中获得最佳状态。 >我们在这里需要Craco来覆盖PostCSS配置并添加parwindcss插件。因此,让我们首先安装它: 使用cra时,package.json中的脚本看起来像:
接下来,在项目根部创建craco配置文件craco.config.js:
注意:如果您使用的是node.js v14,则在运行此命令时会出现错误的问题,上面写着“找不到模块'autoprefixer'”。更新到node.js v15应该有效,但是如果您无法执行此操作,请在此处关注其中一个解决方法。 这将在项目根部创建文件tailwind.config.js。它将具有以下内容:
>
第二个更改将用于黑暗模式:
为了在本教程中,为了简单起见,我们将基于用户的操作系统偏好保持黑暗模式。
> @TailWind指令基本上将样式导入index.css。默认情况下,src/index.js中的cra imports src/index.css: 这意味着将在我们的React项目中使用尾风CSS样式,我们已经准备好开始建立一个美丽的网站!
使用尾风CSS,您只需使用实用程序类: >您还可以使用许多其他类别的颜色阴影,这使主题更容易。使用实用程序类,您几乎不需要真正编写任何CSS。
因此,以前您可能已经这样做是为了根据设备的大小更改元素的宽度:
>
>
>
>让我们从实施产品组件开始。该组件将是显示有关产品的信息的卡组件。创建具有以下内容的SRC/组件/product.js: 接下来,转到src/app.js,然后将内容更改为以下内容: >在这里,我们将products.json文件作为产品导入。然后,我们正在使用我们之前创建的产品组件来浏览产品并显示每个产品。同样,请注意,我们没有添加任何用于样式的课程。 >让我们立即启动服务器。运行以下命令: 您会看到只有一堆文字,但没有任何样式。
在我们的网站中,我们将背景颜色设置为浅灰色,因此我们将bg-gray-200类添加到src/app.js中的最外部 如果您现在检查网站(如果您还没有服务器仍在运行,请确保再次运行),您会发现背景已更改为灰色的浅色阴影。
下一步,我们将要做的就是将内容的宽度更改为屏幕宽度至少为768px时屏幕实际宽度的50%,但在小型设备上保持完整宽度。我们将利用Tailwind的宽度课程,然后再进行一点。宽度类别为格式w- {size},其中大小可以是0到96的范围,它指的是REM中的值; 1/2或3/5之类的比率,或其他比率是指一个百分比;或像自动宽度的自动宽度或100%宽度之类的关键字。 >现在,宽度将更改为屏幕宽度的一半。但是,水平将其居中要好得多。为此,我们将使用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:
如您在我们的产品组件中所见,在最外层的元素中,我们有两个元素,一个具有产品的背景图像,另一个具有信息。我们想彼此显示它们。我们需要做的第一件事是将最外面
添加一些间距 >还有很多要解决的问题。首先,让我们为产品信息容器添加一些填充。为此,我们将使用Tailwind的填充课程。填充类与我们之前检查的边距类完全相似,除了我们使用p而不是m。 我们将看到该网站现在开始看起来更好。 >现在让我们稍作研究版式。您可以看到产品信息看起来都一样。我们无法将标题与描述等类别区分开。首先,让我们更改一些文本的颜色。为此,我们将使用Tailwind的文本颜色类。这些类的格式类似于背景颜色类,但用文本替换B。例如,要使您的文本颜色绿色添加类Text-Green-100。
因此,让我们将类别的文本颜色更改为Text-Gray-400,以使其与其他文本相比有些淡出,然后让我们将价格文本颜色更改为Text-Red-500,以使其脱颖而出。我们还将在价格上添加最高利润,以确保其脱颖而出: 如果您现在访问网站,您会发现文本在区分不同部分方面看起来更清晰:
接下来,让我们更改字体大小。为此,我们将使用Tailwind的字体尺寸类。这些类的格式是文本 - {size},其中大小从sm到9xl。
接下来,让我们修复图像以使其完全出现并正确放置背景图像。
>第二,我们将更改背景重复的属性,以确保图像不会多次重复。为此,我们将使用Tailwind的背景重复课程。这些类的格式为bg- {repotvalue},其中重复值是您要给背景重复属性的值,或者用于圆形值和BG重复空间的BG-REPEAT-ROUND,用于空间值。就我们而言,我们将使用BG-NO-REPEAT。
添加盒子阴影和圆角 >我们将在产品卡中添加Shadow-SM,以向其添加一个小的阴影,然后将圆形lg添加到圆形上:
做到这一点的一种方法是定义自己的颜色。例如,要在我们的主题中添加新颜色,我们可以在tailwind.config.js中进行以下操作:
>自定义主题颜色的另一种方法是更改默认颜色。如前所述,尾风中的默认颜色是白色,黑色,灰色,红色,蓝色,绿色,黄色,橙色,靛蓝,紫色和粉红色。您可以更改这些颜色的实际值。 >
>
接下来,我们将红色变成玫瑰色的调色板,然后灰色为蓝灰色: 如果您想很好地看到颜色的差异,则可以尝试将灰色更改为琥珀色: 您会看到背景现在是黄色的。
黑暗的变体使我们能够轻松地为黑模式造型,同时我们将其定型为轻型模式。
>如果您想在黑暗模式下测试网站的外观,但没有设置为“黑暗模式”,则可以在Chrome Devtools中模仿它。按下 shift p (或cmd> cmd shift shift shift >让我们从“黑暗”中更改网站的背景颜色,添加dark:src/app.js中的bg-gray-800:>
如果您立即检查并且浏览器/OS设置为“暗模式”(或模拟),您会发现背景颜色已更改为灰色的灰色阴影。
>现在,让我们对产品卡进行更改。我们将“黑暗”类添加到最外层的元素中:
>未启用的变体之一是群悬挂。一个组是许多要组合在一起的元素,因此任何状态(例如,悬停)都会影响整个组。通过将组类添加到容器中来声明组。然后,您可以在容器的孩子的元素上使用一个公用事业类之一。除非组中的任何元素(即容器元素内的任何元素)悬停在您使用的群悬挂的实用程序类。 >我们将使每张产品卡成为一个组,然后悬停在图像中。因此,我们将组类添加到产品组件中的最外部元素中,然后将其添加到具有以下类别的背景图像的元素:
如果您现在尝试徘徊在产品上,您会发现阴影放大和图像将放大。
>您可以通过与NPM或YARN安装并配置您的构建过程来处理Tailwind CSS类。 是的,您可以将tailwind CSS与Create React App一起使用。有几种方法,包括craco配置或react-scripts Postcs设置,以使其无缝工作。 >您可以使用ClassName Prop直接将Tailwind CSS类直接应用于您的React组件。例如, 使用实用程序类可以使您的反应组件更加简洁,并促进了一致的设计系统。它还简化了响应式设计并鼓励可重复使用性。 > tailwind CSS提供响应式类,使您可以为各种屏幕尺寸定义不同的样式。您可以通过附加MD(例如MD:您的类定义)的断点来使用这些类。 >虽然Tailwind CSS功能强大,但如果您不小心的类使用情况,它可能会导致更大的文件大小。对于喜欢与传统CSS合作的设计师而言,这也可能具有挑战性。>设置Craco
<span>node -v
</span>
<span>npm -v
</span>
>我们默认情况下使用Craco来完成我们无法使用CRA的事情,我们需要更改脚本以使用Craco来构建项目或开发项目:npx create-react-app react-shop
>
<span>cd react-shop
</span>
现在,我们将生成用于尾风CSS的配置文件:<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>
>
>目前,我们将进行两个更改。首先,我们将更改清除密钥:<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中。用以下内容替换此文件的内容:npx create-react-app react-shop
<span>cd react-shop
</span>
了解尾风CSS实用程序和变体。
例如,要样式的带有边框的<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>
这是每个班级在此示例中的含义:
<span>node -v
</span>
>
<span>npm -v
</span>
>这肯定会使您在每个项目中必须做的乏味的工作更加轻松,更快。起初,它看起来可能令人困惑,但是当您开始涉足它时,您会意识到使用实用程序类和变体是如何成为第二天性的。>
>转到产品端点并复制响应。然后,创建文件src/data/products.json并粘贴响应中。它应该是类似的一系列对象:npx create-react-app react-shop
>
<span>node -v
</span>
<span>npm -v
</span>
>让我们开始添加一些样式。首先,我们将更改页面的背景颜色。为此,我们将利用Tailwind的背景颜色类。背景颜色类是格式bg- {color} - {numericscale},其中numericscale是可选的。npx create-react-app react-shop
>要根据屏幕尺寸指定宽度,我们使用SM,MD,LG等的变体。这些变体指定应用规则所需的最小屏幕大小。
在我们的情况下,由于我们希望宽度为屏幕的50%的宽度至少为768px,因此我们将使用W-1/2的MD变体:
<span>node -v
</span>
<span>npm -v
</span>
,您可以看到它的中心。造型产品组件
>现在让我们继续进行产品组件。我们还将为产品卡添加背景颜色。我们将其变为白色,因此我们将使用BG-White。我们还将使其完整宽度,因此我们将使用W-Full。为了将产品卡彼此分开,我们将使用MB-5添加保证金底部:
>
npx create-react-app react-shop
接下来,我们将使用以前的宽度类更改
<span>cd react-shop
</span>
>
<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>
>
因此,我们将在产品信息容器中添加P-5。我们还将使用MT-4添加一些余量:
>我们还将在src/app.js中的整个容器中添加顶部和底部边距,以便第一个也是最后一个产品不在双方的页面边缘。为此,我们将添加py-4类:
<span>node -v
</span>
改进组件的版式
<span>npm -v
</span>
文本看起来现在好多了。
npx create-react-app react-shop
第三,我们将更改背景位置属性,以使图像始终居中。为此,我们将使用Tailwind的背景位置类。这些类的格式是bg- {position},其中位置是您给背景位置属性的价值。我们将添加BG中心类:
<span>node -v
</span>
现在,我们可以完全看到图像。
>您会注意到一些图像触及容器的边缘。为了解决这个问题,我们将在背景图像元素中添加包装器
<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。
npx create-react-app react-shop
>
>自定义主题
>让我们尝试更改颜色。有不同的方法可以改变主题的颜色。
>
<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>
<span>npm install @craco/craco
</span>
,打开DevTools,然后按
ctrl
<span>node -v
</span>
如果您现在检查,您会注意到产品卡的背景颜色已更改,但是您还会注意到该图像现在看起来不好,因为它具有白色背景。
>让我们在深色模式下在背景包装器中添加白色背景来使其变得更好。这可以通过添加Dark:BG-White来完成。另外,类别文本颜色现在几乎看不见,因此我们将其更改为“黑暗类别:text-gray-700:
<span>npm -v
</span>
>
组和启用插件的变体
默认情况下,所有插件都没有启用某些变体,因为这将导致较大的文件大小。因此,如果我们需要使用这些变体,则必须在tailwind.config.js中手动启用它们的插件。插件这是我们一直在使用的类。例如,背景颜色属于背景颜色插件。
使用上述类,一旦产品中的任何元素徘徊,图像就会放大。我们还将将类溢出添加到产品组件中的最外层元素中,以确保如果图像在其容器之外生长,则不会溢出。我们还将使用Hover:Shadow-2XL使用过渡阴影持续时间-300的产品卡的阴影更大,以确保过渡是无缝的:<span>node -v
</span>
注意:如果您要模拟暗模式(或使用暗模式),则可能在光模式下看到效果更好,因此请确保切换到光模式。
>我们已经创建了一个整洁,响应式的网站,而无需编写任何CSS!那就是尾风CSS的魔力。 Tailwind CSS消除了乏味,重复的工作或写作CSS。它还可以促进创建主题,并让您专注于以光滑的设计创建可重复使用的组件,非常适合反应。我们在本文中介绍的只是刮擦所有您可以轻松创建的所有美丽事物的表面。
的反应上,
>常见问题解答
>什么是尾风CSS,为什么要与React一起使用它? > tailwind CSS是一种实用第一的CSS框架,提供了一组用于造型Web应用程序的预定类别的类。使用带有React的尾风CS可以加快开发过程并保持一致的设计系统。
>如何将尾风CSS与React项目集成在一起? >
如何将尾风CSS类应用于我的反应组件?
在与React的TailWind CSS中使用效用类别有什么好处?
以上是用React和Tailwind CSS构建网站的详细内容。更多信息请关注PHP中文网其他相关文章!