/* 在頂部插入自定義的 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://www.miracleart.cn/link/9220e33481b237d9d5d19112688f6dd4 */
/* @import "./custom_tailwind/custom3.css"; */

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

Buat folder app/assets/stylesheets/ di bawah direktori custom_tailwind untuk menambah fail Tailwind tersuai.

/*
  概述：
    統(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;

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

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

Hanya ada satu gaya yang tidak diulas. Untuk menguji gaya lain, mula-mula ulas gaya yang sedang anda gunakan, kemudian nyahulas gaya lain yang ingin anda uji.

Selepas memilih gaya tersuai yang tersedia, laksanakan arahan berikut:

$ rails -v
Rails 8.0.0

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

Jika arahan di atas tidak dapat menjadikan elemen HTML berkesan, sila kosongkan fail sebelumnya dahulu, dan kemudian prakompil semula:

$ cd classless-css-tailwind && code .

Sekarang, HTML yang digayakan?

Selepas mengkonfigurasi Tailwind dengan penyesuaian di atas dan memulakan pelayan Rails, anda akan melihat HTML yang digayakan.

Mod Gelap

Sesetengah gaya mempunyai pilihan mod gelap. Untuk mengesahkan, tukar tema dalam tetapan pemperibadian warna komputer anda. Cari Windows untuk "dayakan mod gelap untuk apl" dan togol antara mod gelap dan mod terang. Selepas menukar tetapan sistem pengendalian, halaman HTML harus berubah secara automatik untuk menunjukkan bahawa ia menyokong mod terang dan gelap.

Langkah Seterusnya

[x] Susun gaya mengikut keutamaan anda; [x] Gunakan fail CSS dalam projek untuk penggayaan, tanpa menggunakan CDN; [x] Gunakan Tailwind untuk menyalin kefungsian rangka kerja CSS tanpa kelas; [-] Gunakan Rails Live Reload untuk mengemas kini perubahan projek secara dinamik dalam penyemak imbas; [-] Jika anda ingin meluangkan lebih banyak masa di bahagian hadapan, lihat pilihan penyesuaian untuk gaya kegemaran anda;

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

Atas ialah kandungan terperinci Ruby on Rails Fast Frontend Menggunakan CSS-Zero sebagai Rangka Kerja CSS Tanpa Kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!