目录
创建新的 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 样式生效
现在,一个带样式的 HTML ?
深色模式
后续步骤
参考资料
首页 web前端 css教程 使用 CSS-Zero 作为无类 CSS 框架的 Ruby on Rails 快速前端

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

Jan 19, 2025 am 10:05 AM

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

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

创建新的 Rails 应用

  • rails serve 命令前的 time 用于显示命令执行的总时间。以下示例耗时 47 秒。
$ rails -v
Rails 8.0.0

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

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

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

$ cd classless-css-tailwind && code .
登录后复制
登录后复制

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

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

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

展开… 修改上述文件以包含 Tailwind CSS 样式文件的引用。请注意,只有选项 1 未被注释。
/* 在顶部插入自定义的 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; */
登录后复制

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

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

展开… 创建文件 `app/assets/stylesheets/custom_tailwind/custom1.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 中手动控制主题即可。
*/
登录后复制

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

展开… 创建文件 `app/assets/stylesheets/custom_tailwind/custom2.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;

// ... (其余样式代码,与原文相同) ...
登录后复制

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

展开… 创建文件 `app/assets/stylesheets/custom_tailwind/custom3.css` 并复制以下内容:
// ... (其余样式代码,与原文相同) ...
登录后复制

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

展开… 在 `application.html.erb` 文件中,移除或注释掉 `
` 标签,确保它不会影响我们为 Tailwind 创建的自定义样式的行为。
    <!-- ... -->
</main>
登录后复制

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

展开… 如果您按照上述步骤操作,`app/assets/stylesheets/application.tailwind.css` 文件应该只包含一行未注释的 `@import "./custom_tailwind/custom1.css";`。

应该只有一个样式未被注释。要测试其他样式,请先注释掉当前正在使用的样式,然后取消注释要测试的另一个样式。

选择一个可用的自定义样式后,执行以下命令:

$ rails -v
Rails 8.0.0

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

如果上述命令无法使 HTML 元素生效,请先清除之前的文件,然后重新预编译:

$ cd classless-css-tailwind && 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中文网其他相关文章!

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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1670
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1276
29
C# 教程
1256
24
静态表单提供商的比较 静态表单提供商的比较 Apr 16, 2025 am 11:20 AM

让我们尝试在这里造成一个术语:“静态表单提供商”。你带上html

使Sass更快的概念证明 使Sass更快的概念证明 Apr 16, 2025 am 10:38 AM

在一个新项目开始时,Sass汇编发生在眼睛的眨眼中。感觉很棒,尤其是当它与browsersync配对时,它重新加载

每周平台新闻:HTML加载属性,主要的ARIA规格以及从iframe转移到Shadow dom 每周平台新闻:HTML加载属性,主要的ARIA规格以及从iframe转移到Shadow dom Apr 17, 2025 am 10:55 AM

在本周的平台新闻综述中,Chrome引入了一个用于加载的新属性,Web开发人员的可访问性规范以及BBC Move

带有HTML对话框元素的一些动手 带有HTML对话框元素的一些动手 Apr 16, 2025 am 11:33 AM

这是我第一次查看HTML元素。我已经意识到了一段时间,但是尚未将其旋转。它很酷,

纸张形式 纸张形式 Apr 16, 2025 am 11:24 AM

购买或建造是技术的经典辩论。自己构建东西可能会感觉更便宜,因为您的信用卡账单上没有订单项,但是

'订阅播客”链接应在哪里? '订阅播客”链接应在哪里? Apr 16, 2025 pm 12:04 PM

有一段时间,iTunes是播客中的大狗,因此,如果您将“订阅播客”链接到喜欢:

托管您自己的非JavaScript分析的选项 托管您自己的非JavaScript分析的选项 Apr 15, 2025 am 11:09 AM

有很多分析平台可帮助您跟踪网站上的访问者和使用数据。也许最著名的是Google Analytics(广泛使用)

See all articles