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

/* 選項 1：綠色 */
@import "./custom_tailwind/custom1.css";

/* 選項 2：藍色 */
/* @import "./custom_tailwind/custom2.css"; */

/* 選項 3：來自文章“基于 Tailwind 的無類名 CSS” */
/* http://www.miracleart.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) 的重復。大部分深色主題都集中在 :root 中。
    我們使用變量代替直接顏色，并在某些地方利用 Tailwind 的命名。

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


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

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

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

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

---
  最終說明

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

/* =================================================================
   CSS 變量配置
   集中定義項目的所有變量
   ================================================================= */
: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 導入 */
@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://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

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!