首页 >web前端 >css教程 >使用 CSS-Zero 作为无类 CSS 框架的 Ruby on Rails 快速前端

使用 CSS-Zero 作为无类 CSS 框架的 Ruby on Rails 快速前端

Mary-Kate Olsen原创: 2025-01-19 10:05:09979浏览

Ruby on Rails Frontend Rápido Usando CSS-Zero como um Frameworks CSS Classless

本文与本系列之前的文章非常相似，但这次我们将使用 Tailwind 框架作为无类名 CSS 框架。文章灵感来自《基于 Tailwind 的无类名 CSS》一文。

创建新的 Rails 应用

rails serve 命令前的 time 用于显示命令执行的总时间。以下示例耗时 47 秒。

<code class="language-bash">$ rails -v
Rails 8.0.0

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

Rails 8 基于其“无构建”理念，默认使用 Propshaft 作为资源管道库，使用 Importmap 作为 JavaScript 库。Importmap 不对 JavaScript 进行任何处理。

使用 VSCode 或您喜欢的编辑器打开项目

<code class="language-bash">$ cd classless-css-tailwind && code .</code>

创建一些页面来预览 HTML 元素的样式

页面在系列文章的第一篇文章的“常见步骤”中。

修改 Tailwind 文件 `app/assets/stylesheets/application.tailwind.css`

展开…

修改上述文件以包含 Tailwind CSS 样式文件的引用。请注意，只有选项 1 未被注释。

<code class="language-css">/* 在顶部插入自定义的 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; */</code>

在 app/assets/stylesheets/ 目录下创建 custom_tailwind 文件夹，以添加自定义的 Tailwind 文件。

将内容添加到第一个自定义 Tailwind 文件 `custom1.css` 中

展开…

创建文件 `app/assets/stylesheets/custom_tailwind/custom1.css` 并复制以下内容：

<code class="language-css">/*
  概述：
    统一主题变量（我们只使用 --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 中手动控制主题即可。
*/</code>

将内容添加到第二个自定义 Tailwind 文件 `custom2.css` 中

展开…

创建文件 `app/assets/stylesheets/custom_tailwind/custom2.css` 并复制以下内容：

<code class="language-css">/* =================================================================
   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;

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

将内容添加到第三个自定义 Tailwind 文件 `custom3.css` 中

展开…

创建文件 `app/assets/stylesheets/custom_tailwind/custom3.css` 并复制以下内容：

<code class="language-css">// ... (其余样式代码，与原文相同) ...</code>

从 `app/views/layouts/application.html.erb` 文件中移除 Tailwind 类名

展开…

在 `application.html.erb` 文件中，移除或注释掉 `

` 标签，确保它不会影响我们为 Tailwind 创建的自定义样式的行为。

<code class="language-erb">    <!-- ... -->
</main></code>

现在，一个带样式的 HTML ?

配置好带有上述自定义设置的 Tailwind 并启动 Rails 服务器后，您将看到带有样式的 HTML。

深色模式

某些样式具有深色模式 (dark mode) 选项。要确认，请在您的电脑的色彩个性化设置中更改主题。在 Windows 中搜索“启用应用的深色模式”，并在深色模式和浅色模式之间切换。更改操作系统设置后，HTML 页面应该会自动更改，表明它支持浅色和深色模式。

后续步骤

[x] 根据您的喜好整理样式； [x] 使用项目中的 CSS 文件进行样式设置，不使用 CDN； [x] 使用 Tailwind 复制无类名 CSS 框架的功能； [-] 使用 Rails Live Reload 动态更新浏览器中的项目更改； [-] 如果您想花更多时间在前端，请查看您最喜欢的样式的自定义选项；

参考资料

以上是使用 CSS-Zero 作为无类 CSS 框架的 Ruby on Rails 快速前端的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript ruby ruby on rails css html class github windows vscode https

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Desafío Creativo: Cómo Crear un Juego de Tic-Tac-Toe Usando Solo CSS y HTML下一篇：Building Production-Grade Web Applications with Supabase – Part 2

查看更多

使用 CSS-Zero 作为无类 CSS 框架的 Ruby on Rails 快速前端

创建新的 Rails 应用

使用 VSCode 或您喜欢的编辑器打开项目

创建一些页面来预览 HTML 元素的样式

修改 Tailwind 文件 app/assets/stylesheets/application.tailwind.css

将内容添加到第一个自定义 Tailwind 文件 custom1.css 中

将内容添加到第二个自定义 Tailwind 文件 custom2.css 中

将内容添加到第三个自定义 Tailwind 文件 custom3.css 中

从 app/views/layouts/application.html.erb 文件中移除 Tailwind 类名

更多步骤，使自定义 Tailwind 样式生效