/* 在頂部插入自定義的 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：來(lái)自文章“基于 Tailwind 的無(wú)類名 CSS” */
/* http://ipnx.cn/link/9220e33481b237d9d5d19112688f6dd4 */
/* @import "./custom_tailwind/custom3.css"; */

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

app/assets/stylesheets/ ???? ??? 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 來(lái)使用深色模式，
    邏輯會(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ì)的一致性。

---
  最終說(shuō)明

  如果您想進(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 等)。
  對(duì)于那些更喜歡使用 .dark 類來(lái)實(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;

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

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

?? ???? ?? ???? ??? ??? ???. ?? ???? ?????? ?? ?? ?? ?? ???? ?? ??? ?? ?????? ?? ???? ?? ??? ?????.

?? ??? ??? ?? ???? ??? ? ?? ??? ?????.

$ rails -v
Rails 8.0.0

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

? ???? HTML ??? ??? ? ?? ?? ?? ?? ??? ?? ?? ?? ?? ??????.

$ cd classless-css-tailwind && code .

?? ???? ??? HTML???

?? ??? ??? Tailwind? ???? Rails ??? ???? ???? ??? HTML? ?????.

?? ??

?? ????? ??? ?? ??? ????. ????? ???? ?? ??? ???? ??? ?????. Windows?? "?? ?? ??? ?? ???"? ???? ??? ??? ?? ?? ??? ?????. ?? ?? ??? ??? ? HTML ???? ?? ??? ??? ??? ???? ???? ?? ???? ????? ???.

?? ??

[x] ??? ?? ???? ?????. [x] CDN? ???? ?? ??? ??? ?? ?????? CSS ??? ?????. [x] Tailwind? ???? ??? ?? CSS ?????? ??? ?????. [-] Rails Live Reload? ???? ?????? ???? ?? ??? ???? ???????. [-] ??? ???? ? ?? ??? ??? ??? ???? ???? ?? ??? ?? ??? ?????.

????

• 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 ?? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!