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

/* 選項(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ú)類(lèi)名 CSS” */
/* http://ipnx.cn/link/9220e33481b237d9d5d19112688f6dd4 */
/* @import "./custom_tailwind/custom3.css"; */

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

Create a app/assets/stylesheets/ folder under the custom_tailwind directory to add custom Tailwind files.

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

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


  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)用戶(hù)偏好深色模式時(shí)，所有變量都會(huì)被重新定義。

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

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

---
  最終說(shuō)明

  如果您想進(jìn)一步遵循 Tailwind 的標(biāo)準(zhǔn)，減少變量的使用，您可以使用標(biāo)準(zhǔn)的實(shí)用程序類(lèi)
  (bg-gray-50、text-gray-900、dark:bg-gray-800、dark:text-gray-100 等)。
  對(duì)于那些更喜歡使用 .dark 類(lèi)來(lái)實(shí)現(xiàn)深色模式的用戶(hù)，只需將 @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;

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

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

There should be only one style that is uncommented. To test other styles, first comment out the style you are currently using, then uncomment the other style you want to test.

After selecting an available custom style, execute the following command:

$ rails -v
Rails 8.0.0

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

If the above command cannot make the HTML element effective, please clear the previous file first, and then re-precompile:

$ cd classless-css-tailwind && code .

Now, a styled HTML?

After configuring Tailwind with the above customizations and starting the Rails server, you will see styled HTML.

Dark Mode

Some styles have dark mode options. To confirm, change the theme in your computer's color personalization settings. Search Windows for "enable dark mode for apps" and toggle between dark mode and light mode. After changing the operating system settings, the HTML page should automatically change to indicate that it supports light and dark modes.

Next Steps

[x] Organize styles according to your preferences; [x] Use CSS files in the project for styling, without using CDN; [x] Use Tailwind to copy the functionality of classless CSS frameworks; [-] Use Rails Live Reload to dynamically update project changes in the browser; [-] If you want to spend more time on the front end, check out the customization options for your favorite styles;

Reference materials

• 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

The above is the detailed content of Ruby on Rails Fast Frontend Using CSS-Zero as a Classless CSS Frameworks. For more information, please follow other related articles on the PHP Chinese website!