<code class="language-erb"> <!-- ... --> </main></code>
ログイン後にコピー
この記事はこのシリーズのこれまでの記事とよく似ていますが、今回はクラスレス CSS フレームワークとして Tailwind フレームワークを使用します。この記事は、「Tailwind に基づくクラスレス CSS」という記事からインスピレーションを受けています。
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 を使用しません。
<code class="language-bash">$ cd classless-css-tailwind && code .</code>
このページは、シリーズの最初の記事の「共通の手順」セクションにあります。
app/assets/stylesheets/application.tailwind.css
<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>
カスタム Tailwind ファイルを追加するには、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>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>custom3.css
<code class="language-css">// ... (其余样式代码，与原文相同) ...</code>
app/views/layouts/application.html.erb ファイルから削除します<code class="language-erb"> <!-- ... --> </main></code>
コメントされていないスタイルは 1 つだけである必要があります。他のスタイルをテストするには、まず現在使用しているスタイルをコメント アウトし、次にテストする他のスタイルのコメントを解除します。
利用可能なカスタム スタイルを選択した後、次のコマンドを実行します:
<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>
上記のコマンドで HTML 要素を有効にできない場合は、まず前のファイルをクリアしてから、再プリコンパイルしてください:
<code class="language-bash">$ cd classless-css-tailwind && code .</code>
上記のカスタマイズを使用して Tailwind を構成し、Rails サーバーを起動すると、スタイル付きの HTML が表示されます。
一部のスタイルにはダーク モード オプションがあります。確認するには、コンピュータの色の個人設定でテーマを変更します。 Windows で「アプリのダーク モードを有効にする」を検索し、ダーク モードとライト モードを切り替えます。オペレーティング システムの設定を変更すると、HTML ページが自動的に変更され、ライト モードとダーク モードをサポートしていることが示されます。
[x] 好みに応じてスタイルを整理します。 [x] CDN を使用せずに、スタイル設定にプロジェクト内の CSS ファイルを使用します。 [x] Tailwind を使用してクラスレス CSS フレームワークの機能をコピーします。 [-] Rails Live Reload を使用して、ブラウザ内のプロジェクトの変更を動的に更新します。 [-] フロントエンドにもっと時間を費やしたい場合は、お気に入りのスタイルのカスタマイズ オプションをチェックしてください。
以上がCSS-Zero をクラスレス CSS フレームワークとして使用する Ruby on Rails 高速フロントエンドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
