Tailwind CSS 因其實用性優先的樣式設計方法而成為開發人員的熱門選擇。它提供了一種高度可自訂且高效的方法來設計 Web 應用程序，而無需編寫自訂 CSS。在本指南中，我們將引導您從頭開始設定 Tailwind CSS 專案。
Tailwind CSS 是一個實用程式優先的 CSS 框架，它提供低階實用程式類別來直接在標記中建立自訂設計。與 Bootstrap 或 Foundation 等傳統 CSS 框架不同，Tailwind 不附帶預先設計的元件。相反，它提供了一組實用程式類，讓您可以在不離開 HTML 的情況下設計元件。
在我們開始之前，請確保您已安裝以下軟體：
您可以從官網下載並安裝Node.js和npm。
首先，為您的專案建立一個新目錄並導航到其中：
mkdir tailwind-project cd tailwind-project
接下來，初始化一個新的 npm 項目：
npm init -y
此命令建立一個 package.json 文件，它將追蹤您的專案依賴項和腳本。
要安裝 Tailwind CSS，您需要將其作為依賴項新增到您的專案中。執行以下命令：
npm install tailwindcss
安裝 Tailwind CSS 後，您需要建立一個設定檔。該檔案將允許您自訂 Tailwind CSS 的預設設定。要產生此文件，請執行：
npx tailwindcss init
此指令在專案根目錄中建立一個 tailwind.config.js 檔案。您可以在該檔案中自訂 Tailwind 設定。
開啟 tailwind.config.js 檔案。您應該看到以下基本配置：
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
內容數組用於指定所有範本檔案的路徑。這允許 Tailwind 在生產中對未使用的樣式進行 tree-shake。新增 HTML 和 JavaScript 檔案的路徑：
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {},
},
plugins: [],
}
此配置告訴 Tailwind 在 src 目錄內的任何 .html 或 .js 檔案中尋找類別。
接下來，建立一個新的 CSS 文件，您將在其中匯入 Tailwind 的基礎、元件和實用程式樣式。建立一個 src 目錄並在其中建立一個名為 styles.css 的檔案：
mkdir src touch src/styles.css
開啟 styles.css 檔案並新增以下匯入：
@tailwind base; @tailwind components; @tailwind utilities;
這些指令告訴 Tailwind 在您的 CSS 檔案中包含其基礎、元件和實用程式樣式。
要編譯 CSS，您需要使用 Tailwind CLI。將建置腳本新增至您的 package.json 檔案：
"scripts": {
"build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
"watch": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}
建構腳本編譯 src/styles.css 檔案並將結果輸出到 dist/styles.css。監視腳本執行相同的操作，但繼續監視變更並自動重新編譯。
要首次編譯 CSS，請執行：
npm run build
此指令使用編譯後的 styles.css 檔案建立一個 dist 目錄。
現在，在 src 目錄中建立一個 index.html 檔案：
touch src/index.html
開啟index.html 檔案並新增以下樣板 HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Project</title> <link href="../dist/styles.css" rel="stylesheet"> </head> <body> <h1 class="text-4xl font-bold text-center mt-10">Hello, Tailwind CSS!</h1> </body> </html>
這個簡單的 HTML 檔案包含編譯後的 Tailwind CSS 檔案並加入樣式標題。
要查看您的更改，請在網頁瀏覽器中開啟 index.html 檔案。
當您準備好部署專案時，您將需要最佳化 CSS 以進行生產。 Tailwind 提供了一個內建工具，用於清除未使用的樣式並縮小 CSS。
To enable this, update your tailwind.config.js file to include the purge option:
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {},
},
plugins: [],
}
Next, install @fullhuman/postcss-purgecss and cssnano:
npm install @fullhuman/postcss-purgecss cssnano
Create a postcss.config.js file in your project root and add the following configuration:
const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');
module.exports = {
plugins: [
purgecss({
content: ['./src/**/*.{html,js}'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
}),
cssnano({
preset: 'default',
}),
],
}
This configuration sets up PostCSS with PurgeCSS and CSSNano to remove unused styles and minify your CSS.
Finally, update your build script in package.json:
"scripts": {
"build": "NODE_ENV=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}
Run the build script to generate your optimized CSS:
npm run build
Your dist/styles.css file is now optimized for production.
Setting up a Tailwind CSS project from scratch is straightforward and provides a powerful toolkit for building custom designs. By following this guide, you've learned how to install Tailwind CSS, configure it, and optimize it for production. Tailwind's utility-first approach streamlines the styling process, allowing you to focus on building your application.
Happy coding!
以上是從頭開始設定 Tailwind CSS 項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！
