用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中文網其他相關文章！