從頭開始設定 Tailwind CSS 項目

從頭開始設定 Tailwind CSS 項目

Tailwind CSS 因其實用性優先的樣式設計方法而成為開發人員的熱門選擇。它提供了一種高度可自訂且高效的方法來設計 Web 應用程序，而無需編寫自訂 CSS。在本指南中，我們將引導您從頭開始設定 Tailwind CSS 專案。

目錄

1. Tailwind CSS 簡介
2. 先決條件
3. 建立一個新項目
4. 安裝 Tailwind CSS
5. 設定 Tailwind CSS
6. 建立您的第一個 Tailwind CSS 檔案
7. 建構與觀察 CSS
8. 最佳化生產
9. 結論

Tailwind CSS 簡介

Tailwind CSS 是一個實用程式優先的 CSS 框架，它提供低階實用程式類別來直接在標記中建立自訂設計。與 Bootstrap 或 Foundation 等傳統 CSS 框架不同，Tailwind 不附帶預先設計的元件。相反，它提供了一組實用程式類，讓您可以在不離開 HTML 的情況下設計元件。

為什麼要使用 Tailwind CSS？

• 實用程式優先方法：允許您直接在 HTML 中套用樣式，減少對自訂 CSS 的需求。
• 自訂：Tailwind 是高度可自訂的，可讓您覆蓋預設設定並創建您獨特的設計系統。
• 響應式設計：Tailwind 提供內建響應式設計實用程序，可輕鬆建立行動優先設計。
• 一致性：確保整個應用程式的樣式一致。

先決條件

在我們開始之前，請確保您已安裝以下軟體：

• Node.js（v12 或更高版本）
• npm（節點套件管理器）

您可以從官網下載並安裝Node.js和npm。

設定新項目

首先，為您的專案建立一個新目錄並導航到其中：

mkdir tailwind-project
cd tailwind-project

接下來，初始化一個新的 npm 項目：

npm init -y

此命令建立一個 package.json 文件，它將追蹤您的專案依賴項和腳本。

安裝 Tailwind CSS

要安裝 Tailwind CSS，您需要將其作為依賴項新增到您的專案中。執行以下命令：

npm install tailwindcss

安裝 Tailwind CSS 後，您需要建立一個設定檔。該檔案將允許您自訂 Tailwind CSS 的預設設定。要產生此文件，請執行：

npx tailwindcss init

此指令在專案根目錄中建立一個 tailwind.config.js 檔案。您可以在該檔案中自訂 Tailwind 設定。

配置 Tailwind CSS

開啟 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 檔案中尋找類別。

建立您的第一個 Tailwind CSS 文件

接下來，建立一個新的 CSS 文件，您將在其中匯入 Tailwind 的基礎、元件和實用程式樣式。建立一個 src 目錄並在其中建立一個名為 styles.css 的檔案：

mkdir src
touch src/styles.css

開啟 styles.css 檔案並新增以下匯入：

@tailwind base;
@tailwind components;
@tailwind utilities;

這些指令告訴 Tailwind 在您的 CSS 檔案中包含其基礎、元件和實用程式樣式。

建立和觀察 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 目錄。

建立您的第一個 HTML 文件

現在，在 src 目錄中建立一個 index.html 檔案：

touch src/index.html

開啟index.html 檔案並新增以下樣板 HTML：

  <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">


  <h1 id="Hello-Tailwind-CSS">Hello, Tailwind CSS!</h1>

這個簡單的 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-/:]+(?



<p>This configuration sets up PostCSS with PurgeCSS and CSSNano to remove unused styles and minify your CSS.</p>

<p>Finally, update your build script in package.json:<br>
</p>

<pre class="brush:php;toolbar:false">"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.

Conclusion

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