/* 在頂部插入自定義的 Tailwind CSS */
/* 如果“@tailwind base”、“@tailwind components”和“@tailwind utilities”沒有被注釋 */

/* 選項(xiàng) 1：綠色 */
@import "./custom_tailwind/custom1.css";

/* 選項(xiàng) 2：藍(lán)色 */
/* @import "./custom_tailwind/custom2.css"; */

/* 選項(xiàng) 3：來自文章“基于 Tailwind 的無類名 CSS” */
/* http://ipnx.cn/link/9220e33481b237d9d5d19112688f6dd4 */
/* @import "./custom_tailwind/custom3.css"; */

/* @tailwind base;
@tailwind components;
@tailwind utilities; */

在 app/assets/stylesheets/ 目錄下創(chuàng)建 custom_tailwind 文件夾，以添加自定義的 Tailwind 文件。

/*
  概述：
    統(tǒng)一主題變量（我們只使用 --background、--text 和 --accent 等，而不是 --background-light 和 --background-dark）。
    減少 @media (prefers-color-scheme: dark) 的重復(fù)。大部分深色主題都集中在 :root 中。
    我們使用變量代替直接顏色，并在某些地方利用 Tailwind 的命名。

    如果您使用類（class="dark"）而不是 prefers-color-scheme 來使用深色模式，
    邏輯會(huì)略有不同（使用 dark:bg-*、dark:text-* 等）。
    但是，根據(jù)建議，我們保留了 @media (prefers-color-scheme: dark) 以尊重用戶的偏好。


  1. 統(tǒng)一的主題變量
  現(xiàn)在我們使用 --background、--text 和 --accent（以及其他）代替 --background-light、--background-dark 等。
  這減少了重復(fù)，使代碼更易于維護(hù)。

  2. 減少 @media (prefers-color-scheme: dark) 的重復(fù)
  幾乎所有深色主題的內(nèi)容都集中在一個(gè)塊中，位于 :root 內(nèi)。
  因此，每當(dāng)用戶偏好深色模式時(shí)，所有變量都會(huì)被重新定義。

  3. 使用補(bǔ)充變量
  我們添加了 --background-code、--border、--form-border 和 --focus-ring，以確保所有可能根據(jù)主題變化的顏色都易于修改。

  4. 優(yōu)化的表單樣式
  我們統(tǒng)一了大多數(shù)表單元素，而不是將每種輸入類型分成多個(gè)塊。
  這避免了重復(fù)，并保持了設(shè)計(jì)的一致性。

---
  最終說明

  如果您想進(jìn)一步遵循 Tailwind 的標(biāo)準(zhǔn)，減少變量的使用，您可以使用標(biāo)準(zhǔn)的實(shí)用程序類
  (bg-gray-50、text-gray-900、dark:bg-gray-800、dark:text-gray-100 等)。
  對于那些更喜歡使用 .dark 類來實(shí)現(xiàn)深色模式的用戶，只需將 @media (prefers-color-scheme: dark)
  替換為文件中的 .dark & { ... } 選擇器，并使用 JavaScript 或在 HTML 中手動(dòng)控制主題即可。
*/

/* =================================================================
   CSS 變量配置
   集中定義項(xiàng)目的所有變量
   ================================================================= */
:root {
  /* 顏色 - 淺色主題 */
  --color-primary: #2563eb; /* Tailwind 的 blue-600 */
  --color-primary-hover: #1d4ed8; /* Tailwind 的 blue-700 */
  --color-background: #ffffff;
  --color-text: #1f2937; /* Tailwind 的 gray-800 */
  --color-text-muted: #4b5563; /* Tailwind 的 gray-600 */
  --color-border: #d1d5db; /* Tailwind 的 gray-300 */
  --color-input-bg: #f9fafb; /* Tailwind 的 gray-50 */
  --color-code-bg: #f3f4f6; /* Tailwind 的 gray-100 */
  --color-code-text: #273e65; /* Tailwind 的 blue-800 */

  /* 間距 */
  --spacing-base: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* 圓角 */
  --radius-base: 0.375rem;
  --radius-lg: 0.5rem;

  /* 最大寬度 */
  --max-width-content: 48rem; /* 768px */
}

/* 使用 prefers-color-scheme 配置深色主題 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 顏色 - 深色主題 */
    --color-primary: #0284c7; /* Tailwind 的 sky-600 */
    --color-primary-hover: #6990c7; /* Tailwind 的 blue-400 */
    --color-background: #111827; /* Tailwind 的 gray-900 */
    --color-text: #f3f4f6; /* Tailwind 的 gray-100 */
    --color-text-muted: #9ca3af; /* Tailwind 的 gray-400 */
    --color-border: #374151; /* Tailwind 的 gray-700 */
    --color-input-bg: #1f2937; /* Tailwind 的 gray-800 */
    --color-code-bg: #1f2937; /* Tailwind 的 gray-800 */
    --color-code-text: #e8ecf6; /* Tailwind 的 blue-100 */
  }
}

/* Tailwind 導(dǎo)入 */
@tailwind base;
@tailwind components;
@tailwind utilities;

// ... (其余樣式代碼，與原文相同) ...

// ... (其余樣式代碼，與原文相同) ...

應(yīng)該只有一個(gè)樣式未被注釋。要測試其他樣式，請先注釋掉當(dāng)前正在使用的樣式，然后取消注釋要測試的另一個(gè)樣式。

選擇一個(gè)可用的自定義樣式后，執(zhí)行以下命令：

$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

如果上述命令無法使 HTML 元素生效，請先清除之前的文件，然后重新預(yù)編譯：

$ cd classless-css-tailwind && code .

現(xiàn)在，一個(gè)帶樣式的 HTML ?

配置好帶有上述自定義設(shè)置的 Tailwind 并啟動(dòng) Rails 服務(wù)器后，您將看到帶有樣式的 HTML。

深色模式

某些樣式具有深色模式 (dark mode) 選項(xiàng)。要確認(rèn)，請?jiān)谀碾娔X的色彩個(gè)性化設(shè)置中更改主題。在 Windows 中搜索“啟用應(yīng)用的深色模式”，并在深色模式和淺色模式之間切換。更改操作系統(tǒng)設(shè)置后，HTML 頁面應(yīng)該會(huì)自動(dòng)更改，表明它支持淺色和深色模式。

后續(xù)步驟

[x] 根據(jù)您的喜好整理樣式； [x] 使用項(xiàng)目中的 CSS 文件進(jìn)行樣式設(shè)置，不使用 CDN； [x] 使用 Tailwind 復(fù)制無類名 CSS 框架的功能； [-] 使用 Rails Live Reload 動(dòng)態(tài)更新瀏覽器中的項(xiàng)目更改； [-] 如果您想花更多時(shí)間在前端，請查看您最喜歡的樣式的自定義選項(xiàng)；

參考資料

• http://ipnx.cn/link/9220e33481b237d9d5d19112688f6dd4
• http://ipnx.cn/link/cc0a521e0f695aa06ed11384fb616ac3
• http://ipnx.cn/link/dfae769c739093f5225cecaf4d5a612f
• http://ipnx.cn/link/930473a02d035f62b3c3c2628a284416
• http://ipnx.cn/link/c42c101f89ec57e54230d611f74d5ae1
• http://ipnx.cn/link/3f37c010783748f8e8577f732d74054c
• http://ipnx.cn/link/480167897cc43b2fb914238f45d7dbbf
• http://ipnx.cn/link/c48eb27d5b0a288f5bbf1545c218e001

以上是使用 CSS-Zero 作為無類 CSS 框架的 Ruby on Rails 快速前端的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！