目录
创建新的 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

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

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局!恭喜Vue团队完成了完成,我知道这是一项巨大的努力,而且很长时间。所有新文档也是如此。

您可以从浏览器获得有效的CSS属性值吗? 您可以从浏览器获得有效的CSS属性值吗? Apr 02, 2025 pm 06:17 PM

我有人写了这个非常合法的问题。 Lea只是在博客上介绍了如何从浏览器中获得有效的CSS属性。那样的是这样。

在CI/CD上有点 在CI/CD上有点 Apr 02, 2025 pm 06:21 PM

我说的“网站”比“移动应用程序”更合适,但我喜欢Max Lynch的框架:

带有粘性定位的堆叠卡和一点点的杂物 带有粘性定位的堆叠卡和一点点的杂物 Apr 03, 2025 am 10:30 AM

前几天,我发现了科里·金尼文(Corey Ginnivan)网站上的这一点,当您滚动时,彼此之间的卡片堆放集。

在WordPress块编辑器中使用Markdown和本地化 在WordPress块编辑器中使用Markdown和本地化 Apr 02, 2025 am 04:27 AM

如果我们需要直接在WordPress编辑器中向用户显示文档,那么最佳方法是什么?

比较浏览器的响应式设计 比较浏览器的响应式设计 Apr 02, 2025 pm 06:25 PM

这些桌面应用程序中有许多目标是同时在不同的维度上显示您的网站。因此,例如,您可以写作

如何将CSS网格用于粘头和页脚 如何将CSS网格用于粘头和页脚 Apr 02, 2025 pm 06:29 PM

CSS网格是一系列属性的集合,旨在使布局比以往任何时候都容易。像任何东西一样,那里有一点学习曲线,但是网格是

为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? 为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? Apr 05, 2025 pm 05:51 PM

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时,你可能会遇到一些令人困惑的现象,比如在开发者工具(d...

See all articles