CSS-Zero をクラスレス CSS フレームワークとして使用する Ruby on Rails 高速フロントエンド
この記事はこのシリーズのこれまでの記事とよく似ていますが、今回はクラスレス 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` ファイルで、`<!-- ... --> </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 を使用して、ブラウザ内のプロジェクトの変更を動的に更新します。 [-] フロントエンドにもっと時間を費やしたい場合は、お気に入りのスタイルのカスタマイズ オプションをチェックしてください。
参考資料
- https://www.php.cn/link/9220e33481b237d9d5d19112688f6dd4
- https://www.php.cn/link/cc0a521e0f695aa06ed11384fb616ac3
- https://www.php.cn/link/dfae769c739093f5225cecaf4d5a612f
- https://www.php.cn/link/930473a02d035f62b3c3c2628a284416
- https://www.php.cn/link/c42c101f89ec57e54230d611f74d5ae1
- https://www.php.cn/link/3f37c010783748f8e8577f732d74054c
- https://www.php.cn/link/480167897cc43b2fb914238f45d7dbbf
- https://www.php.cn/link/c48eb27d5b0a288f5bbf1545c218e001
以上がCSS-Zero をクラスレス CSS フレームワークとして使用する Ruby on Rails 高速フロントエンドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











それは&#039; Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。

私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

WordPressエディターでユーザーに直接ドキュメントを表示する必要がある場合、それを行うための最良の方法は何ですか?

これらのデスクトップアプリがいくつかあり、目標があなたのサイトをさまざまな次元ですべて同時に表示しています。たとえば、書くことができます

CSS Gridは、レイアウトをこれまで以上に簡単にするように設計されたプロパティのコレクションです。何でもするように、少し学習曲線がありますが、グリッドは

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