如何使用NextJS設(shè)置Tailwind CSS
與提供預(yù)先設(shè)計(jì)的組件的傳統(tǒng) CSS 框架不同，Tailwind CSS 專注于提供一組全面的實(shí)用程序類，您可以直接將這些類應(yīng)用于 HTML 元素。
當(dāng)與用于構(gòu)建服務(wù)器端呈現(xiàn)應(yīng)用程序的強(qiáng)大 React 框架 Next.js 結(jié)合使用時(shí)，您可以解鎖無縫開發(fā)體驗(yàn)并創(chuàng)建高性能、可擴(kuò)展的 Web 應(yīng)用程序。
在本教程中，我將引導(dǎo)您完成使用 Next.js 設(shè)置 Tailwind CSS 的過程，以便您可以在 Next.js 項(xiàng)目中利用 Tailwind 實(shí)用程序類的強(qiáng)大功能。
（更多優(yōu)質(zhì)教程：java567.com）
先決條件
在開始之前，請(qǐng)確保您具備以下先決條件：
Node.js 安裝在你的機(jī)器上
JavaScript 和 React 的基礎(chǔ)知識(shí)
熟悉 Next.js
Tailwind CSS 和實(shí)用程序類如何工作
Tailwind CSS 遵循實(shí)用程序優(yōu)先的樣式設(shè)置方法。它提供了大量小型、單一用途的實(shí)用程序類，您可以將這些類直接應(yīng)用于您的 HTML 元素。
每個(gè)實(shí)用程序類代表一個(gè)特定的 CSS 屬性或?qū)傩越M合，通過將這些類組合在一起可以輕松構(gòu)建復(fù)雜的 UI 組件。
例如，無需定義自定義 CSS 類來設(shè)置按鈕的顏色，您可以簡單地應(yīng)用“text-blue-500”實(shí)用程序類來實(shí)現(xiàn)所需的效果。
Tailwind CSS 中的實(shí)用程序類被設(shè)計(jì)為高度靈活和可定制的。您可以利用 Tailwind 提供的直觀命名約定輕松調(diào)整邊距、填充、字體大小、顏色等屬性。
這種方法提供了對(duì)樣式的細(xì)粒度控制，無需為最常見的樣式方案編寫自定義 CSS。
為什么將 Tailwind CSS 與 Next.js 一起使用？
Next.js 是一個(gè)強(qiáng)大的框架，用于構(gòu)建服務(wù)器端呈現(xiàn)的 React 應(yīng)用程序。它提供了出色的開發(fā)體驗(yàn)，并提供了自動(dòng)代碼拆分、服務(wù)器端呈現(xiàn)和靜態(tài)站點(diǎn)生成等功能。
當(dāng)您將 Next 與 Tailwind CSS 一起使用時(shí)，它使您能夠毫不費(fèi)力地將 Tailwind 的實(shí)用程序類集成到您的應(yīng)用程序開發(fā)工作流程中。
Next.js 通過在構(gòu)建過程中自動(dòng)搖樹未使用的 CSS 來優(yōu)化 CSS 樣式的傳遞。這意味著即使 Tailwind CSS 提供了一組廣泛的實(shí)用程序類，但只有您在應(yīng)用程序中實(shí)際使用的樣式才會(huì)包含在最終包中。這種方法可確保您的應(yīng)用程序保持輕量級(jí)并高效執(zhí)行。
通過結(jié)合使用 Tailwind CSS 和 Next.js，您可以快速制作原型、設(shè)計(jì)和構(gòu)建響應(yīng)式用戶界面，同時(shí)享受簡化的開發(fā)流程和優(yōu)化的性能帶來的好處。
現(xiàn)在您了解了 Tailwind CSS 和 Next.js 之間的優(yōu)勢(shì)和協(xié)同作用，讓我們深入了解使用 Next.js 設(shè)置 Tailwind CSS 的分步過程。
第 1 步：創(chuàng)建一個(gè)新的 Next.js 項(xiàng)目
首先，讓我們創(chuàng)建一個(gè)新的 Next.js 項(xiàng)目。打開終端并運(yùn)行以下命令：
?npx create-next-app my-tailwind-project
這將在同名目錄中創(chuàng)建一個(gè)名為“my-tailwind-project”的新 Next.js 項(xiàng)目。
第 2 步：安裝 Tailwind CSS
通過運(yùn)行以下命令導(dǎo)航到項(xiàng)目目錄：
?cd my-tailwind-project
接下來，通過運(yùn)行以下命令安裝 Tailwind CSS 及其依賴項(xiàng)：
? ? ?npm install tailwindcss postcss autoprefixer
第 3 步：配置 Tailwind CSS
安裝 Tailwind CSS 后，我們需要配置它以使用 Next.js。在項(xiàng)目根目錄新建文件postcss.config.js，添加如下代碼：
?module.exports = {
? ?plugins: [
? ? ?'tailwindcss',
? ? ?'postcss-flexbugs-fixes',
? ? ?'postcss-preset-env',
? ? ?[
? ? ? ?'postcss-normalize',
? ? ? ?{
? ? ? ? ?allowDuplicates: false,
? ? ? ?},
? ? ?],
? ? ?[
? ? ? ?'@fullhuman/postcss-purgecss',
? ? ? ?{
? ? ? ? ?content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
? ? ? ? ?defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
? ? ? ?},
? ? ?],
? ? ?'autoprefixer',
? ?],
?};
此配置設(shè)置 Tailwind CSS，添加必要的 PostCSS 插件，并包括 PurgeCSS 以刪除生產(chǎn)構(gòu)建中未使用的 CSS。
第 4 步：創(chuàng)建 Tailwind CSS 配置
接下來，我們需要為 Tailwind CSS 生成默認(rèn)配置文件。此配置文件允許您根據(jù)項(xiàng)目的特定需求自定義 Tailwind CSS。它定義了調(diào)色板、排版設(shè)置、間距實(shí)用程序等。
tailwind.config.js 文件充當(dāng) Tailwind CSS 的中央配置中心。它提供了一個(gè) JavaScript 對(duì)象，您可以在其中定義自定義項(xiàng)并擴(kuò)展默認(rèn)配置。
通過生成默認(rèn)配置文件，您可以靈活地修改 Tailwind CSS 的各個(gè)方面，包括主題自定義、擴(kuò)展實(shí)用程序類以及在生產(chǎn)構(gòu)建期間清除未使用的 CSS。
自定義配置文件允許您定制實(shí)用程序類和整體設(shè)計(jì)系統(tǒng)，以符合您的應(yīng)用程序要求和品牌指南。
現(xiàn)在讓我們?yōu)?Tailwind CSS 生成默認(rèn)配置文件。運(yùn)行以下命令：
?npx tailwindcss init
這將在項(xiàng)目的根目錄中創(chuàng)建一個(gè) tailwind.config.js 文件。
第 5 步：自定義 Tailwind CSS
打開 tailwind.config.js 文件并根據(jù)項(xiàng)目需要自定義 Tailwind CSS。以下是自定義 tailwind.config.js 文件的示例：
?module.exports = {
? ?purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
? ?darkMode: false,
? ?theme: {
? ? ?extend: {
? ? ? ?colors: {
? ? ? ? ?primary: '#FF0000',
? ? ? ? ?secondary: '#00FF00',
? ? ? ?},
? ? ? ?fontFamily: {
? ? ? ? ?sans: ['Roboto', 'Arial', 'sans-serif'],
? ? ? ?},
? ? ?},
? ?},
? ?variants: {
? ? ?extend: {},
? ?},
? ?plugins: [],
?};
在此示例中，我們通過以下方式自定義 Tailwind CSS 配置：
使用清除選項(xiàng)指定要清除的文件。這確保只有項(xiàng)目中使用的 CSS 類包含在最終構(gòu)建中。
通過將darkMode設(shè)置為false來禁用暗模式功能。
使用兩種自定義顏色擴(kuò)展調(diào)色板：primary和secondary。
添加一個(gè)名為sans的自定義字體系列，其中包括字體 Roboto、Arial 和通用的 sans-serif 后備字體。
將此基本配置的變體和插件部分保留為空。
您可以通過探索官方文檔中可用的其他配置選項(xiàng)來進(jìn)一步自定義 Tailwind CSS。Tailwind CSS 提供了廣泛的靈活性，允許您根據(jù)項(xiàng)目的特定設(shè)計(jì)要求定制框架。
自定義 tailwind.config.js 文件后，保存它，然后繼續(xù)下一步。
第 6 步：導(dǎo)入 Tailwind CSS 樣式
要在您的 Next.js 項(xiàng)目中使用 Tailwind CSS 樣式，請(qǐng)將樣式導(dǎo)入到您的 pages/_app.js 文件中。打開文件并添加以下代碼：
?import 'tailwindcss/tailwind.css';
?
?function MyApp({ Component, pageProps }) {
? ?return <Component {...pageProps} />;
?}
?
?export default MyApp;
這會(huì)導(dǎo)入已編譯的 Tailwind CSS 樣式并將它們應(yīng)用于您的整個(gè)應(yīng)用程序。
第 7 步：啟動(dòng)開發(fā)服務(wù)器
現(xiàn)在，您已準(zhǔn)備好啟動(dòng)開發(fā)服務(wù)器并查看 Tailwind CSS 的運(yùn)行情況。運(yùn)行以下命令：
?npm run dev
http://localhost:3000在瀏覽器中訪問，您應(yīng)該會(huì)看到應(yīng)用了 Tailwind CSS 樣式的 Next.js 應(yīng)用程序。
這將生成您的應(yīng)用程序的生產(chǎn)就緒構(gòu)建，僅包括必要的 CSS 樣式。
結(jié)論
恭喜！您已成功使用 Next.js 設(shè)置 Tailwind CSS。您現(xiàn)在可以開始利用 Tailwind 的實(shí)用程序類在您的 Next.js 項(xiàng)目中快速構(gòu)建美觀且響應(yīng)迅速的 UI 組件。
隨意瀏覽 Tailwind CSS 文檔以發(fā)現(xiàn)范圍廣泛的可用實(shí)用程序類。
請(qǐng)記住定期更新 Tailwind CSS 及其依賴項(xiàng)，以便從最新功能和錯(cuò)誤修復(fù)中獲益。
