用React和Tailwind CSS構建網站
- William Shakespeare原創
- 2025-02-09 09:13:17905瀏覽
本教程展示瞭如何使用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所需的依賴項： 通常，要配置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中文網其他相關文章！