目次
新しい Rails アプリを作成する
VSCode またはお気に入りのエディタを使用してプロジェクトを開きます
HTML 要素のスタイルをプレビューするページをいくつか作成します
Tailwind ファイルを変更します app/assets/stylesheets/application.tailwind.css
最初のカスタム Tailwind ファイルにコンテンツを追加します custom1.css
3 番目のカスタム Tailwind ファイルにコンテンツを追加します custom3.css
Tailwind クラス名を app/views/layouts/application.html.erb ファイルから削除します
カスタム Tailwind スタイルを有効にするための追加手順
それでは、スタイル付きの HTML でしょうか?
ダークモード
次のステップ
参考資料
ホームページ ウェブフロントエンド 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

この記事はこのシリーズのこれまでの記事とよく似ていますが、今回はクラスレス CSS フレームワークとして Tailwind フレームワークを使用します。この記事は、「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; */
ログイン後にコピー

カスタム Tailwind ファイルを追加するには、app/assets/stylesheets/ ディレクトリの下に custom_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 中手动控制主题即可。
*/
ログイン後にコピー

2 番目のカスタム 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;

// ... (其余样式代码,与原文相同) ...
ログイン後にコピー

3 番目のカスタム Tailwind ファイルにコンテンツを追加します custom3.css

展開… ファイル「app/assets/stylesheets/custom_tailwind/custom3.css」を作成し、次の内容をコピーします。
// ... (其余样式代码,与原文相同) ...
ログイン後にコピー

Tailwind クラス名を app/views/layouts/application.html.erb ファイルから削除します

展開… `application.html.erb` ファイルで、`
` タグを削除またはコメント アウトして、Tailwind 用に作成したカスタム スタイルの動作に影響を与えないようにします。
    <!-- ... -->
</main>
ログイン後にコピー

カスタム Tailwind スタイルを有効にするための追加手順

展開… 上記の手順に従った場合、`app/assets/stylesheets/application.tailwind.css` ファイルには、コメントされていない行 `@import "./custom_tailwind/custom1.css";` が 1 行だけ含まれているはずです。

コメントされていないスタイルは 1 つだけである必要があります。他のスタイルをテストするには、まず現在使用しているスタイルをコメント アウトし、次にテストする他のスタイルのコメントを解除します。

利用可能なカスタム スタイルを選択した後、次のコマンドを実行します:

$ 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 が表示されます。

ダークモード

一部のスタイルにはダーク モード オプションがあります。確認するには、コンピュータの色の個人設定でテーマを変更します。 Windows で「アプリのダーク モードを有効にする」を検索し、ダーク モードとライト モードを切り替えます。オペレーティング システムの設定を変更すると、HTML ページが自動的に変更され、ライト モードとダーク モードをサポートしていることが示されます。

次のステップ

[x] 好みに応じてスタイルを整理します。 [x] CDN を使用せずに、スタイル設定にプロジェクト内の CSS ファイルを使用します。 [x] Tailwind を使用してクラスレス CSS フレームワークの機能をコピーします。 [-] Rails Live Reload を使用して、ブラウザ内のプロジェクトの変更を動的に更新します。 [-] フロントエンドにもっと時間を費やしたい場合は、お気に入りのスタイルのカスタマイズ オプションをチェックしてください。

参考資料

以上がCSS-Zero をクラスレス CSS フレームワークとして使用する Ruby on Rails 高速フロントエンドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

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

それは&#039; 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ブロックエディターでのマークダウンとローカリゼーションを使用します WordPressブロックエディターでのマークダウンとローカリゼーションを使用します 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 Gridは、レイアウトをこれまで以上に簡単にするように設計されたプロパティのコレクションです。何でもするように、少し学習曲線がありますが、グリッドは

Googleフォント変数フォント Googleフォント変数フォント Apr 09, 2025 am 10:42 AM

Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません

See all articles