Ruby on Rails Fast Frontend Using CSS-Zero as a Classless CSS Frameworks

This article is very similar to the previous articles in this series, but this time we will use the Tailwind framework as a classless CSS framework. The article is inspired by the article "Classless CSS based on Tailwind".

Create a new Rails app

• rails serve The time before the command is used to display the total time of command execution. The following example took 47 seconds.

$ rails -v
Rails 8.0.0

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

Rails 8, based on its "no build" philosophy, uses Propshaft as the resource pipeline library and Importmap as the JavaScript library by default. Importmap does not do anything with JavaScript.

Open the project using VSCode or your favorite editor

$ cd classless-css-tailwind && code .

Create some pages to preview the styles of HTML elements

The page is in the "Common Steps" section of the first article in the series.

Modify Tailwind file app/assets/stylesheets/application.tailwind.css

Expand…

Modify the above file to include a reference to the Tailwind CSS style file. Note that only option 1 is uncommented.

/* 在顶部插入自定义的 Tailwind CSS */
/* 如果“@tailwind base”、“@tailwind components”和“@tailwind utilities”没有被注释 */

/* 选项 1：绿色 */
@import "./custom_tailwind/custom1.css";

/* 选项 2：蓝色 */
/* @import "./custom_tailwind/custom2.css"; */

/* 选项 3：来自文章“基于 Tailwind 的无类名 CSS” */
/* https://www.php.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.

Add content to the first custom Tailwind file custom1.css

Expand…

Create the file `app/assets/stylesheets/custom_tailwind/custom1.css` and copy the following content:

/*
  概述：
    统一主题变量（我们只使用 --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. 统一的主题变量
  现在我们使用 --background、--text 和 --accent（以及其他）代替 --background-light、--background-dark 等。
  这减少了重复，使代码更易于维护。

  2. 减少 @media (prefers-color-scheme: dark) 的重复
  几乎所有深色主题的内容都集中在一个块中，位于 :root 内。
  因此，每当用户偏好深色模式时，所有变量都会被重新定义。

  3. 使用补充变量
  我们添加了 --background-code、--border、--form-border 和 --focus-ring，以确保所有可能根据主题变化的颜色都易于修改。

  4. 优化的表单样式
  我们统一了大多数表单元素，而不是将每种输入类型分成多个块。
  这避免了重复，并保持了设计的一致性。

---
  最终说明

  如果您想进一步遵循 Tailwind 的标准，减少变量的使用，您可以使用标准的实用程序类
  (bg-gray-50、text-gray-900、dark:bg-gray-800、dark:text-gray-100 等)。
  对于那些更喜欢使用 .dark 类来实现深色模式的用户，只需将 @media (prefers-color-scheme: dark)
  替换为文件中的 .dark & { ... } 选择器，并使用 JavaScript 或在 HTML 中手动控制主题即可。
*/

Add content to the second custom Tailwind file custom2.css

Expand…

Create the file `app/assets/stylesheets/custom_tailwind/custom2.css` and copy the following content:

/* =================================================================
   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;

// ... (其余样式代码，与原文相同) ...

Add content to third custom Tailwind file custom3.css

Expand…

Create the file `app/assets/stylesheets/custom_tailwind/custom3.css` and copy the following content:

// ... (其余样式代码，与原文相同) ...

Remove Tailwind class name from app/views/layouts/application.html.erb file

Expand…

In the `application.html.erb` file, remove or comment out the `

` tag to make sure it does not affect the behavior of the custom styles we created for Tailwind.

    <!-- ... -->
</main>

More steps to make custom Tailwind styles take effect

Expand…

If you followed the steps above, the `app/assets/stylesheets/application.tailwind.css` file should contain only one uncommented line `@import "./custom_tailwind/custom1.css";`.

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

• https://www.php.cn/link/9220e33481b237d9d5d19112688f6dd4
• https://www.php.cn/link/cc0a521e0f695aa06ed11384fb616ac3
• https://www.php.cn/link/dfae769c739093f5225cecaf4d5a612f
• https://www.php.cn/link/930473a02d035f62b3c3c2628a284416
• https://www.php.cn/link/c42c101f89ec57e54230d611f74d5ae1
• https://www.php.cn/link/3f37c010783748f8e8577f732d74054c
• https://www.php.cn/link/480167897cc43b2fb914238f45d7dbbf
• https://www.php.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!