Tailwind をクラスレス CSS フレームワークとして使用する高速 Ruby on Rails フロントエンド-CSSチュートリアル-php.cn

新しい Rails アプリケーションを作成する

VSCode またはお気に入りのエディタを使用してプロジェクトを開きます

Rails ルートを表示

CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成します。

html_test_2展開…

展開...html_test_3リンク https://github.com/cbracco/html5-test-page/blob/master/index.html にアクセスし、`

ホームページ

ウェブフロントエンド

CSSチュートリアル

Tailwind をクラスレス CSS フレームワークとして使用する高速 Ruby on Rails フロントエンド

Mary-Kate Olsen

Jan 15, 2025 am 10:44 AM

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

この記事はこのシリーズのこれまでの記事とよく似ていますが、今回はクラスレス CSS フレームワークとして Tailwind フレームワークを使用します。

新しい Rails アプリケーションを作成する

rails serve コマンドの前の time は、コマンド実行の合計時間を表示するために使用されます。次の例では 47 秒かかりました。

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

ログイン後にコピー

Rails 8 は、「No Build」哲学に基づいて、デフォルトで Propshaft をリソースパイプラインライブラリとして使用し、Importmap を JavaScript ライブラリとして使用します。 Importmap は JavaScript 処理を実行しません。

VSCode またはお気に入りのエディタを使用してプロジェクトを開きます

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

ログイン後にコピー

Rails のデフォルトレイアウトを理解する `app/views/layouts/application.html.erb`

展開…

- 構成より規約 (CoC) の原則に従って、Rails はすべてのページをレンダリングするためのデフォルトレイアウトとして `application.html.erb` を使用します。 - Rails 8 の元のファイルの内容は、以下と同じか類似している必要があります。

<code>$ cd classless-css-tailwind && code .</code>

ログイン後にコピー

<head> タグには、ページのレンダリングと適切な機能のための重要な構造要素が含まれています。 <head> ページの動作 (JavaScript を使用)、外観 (CSS を使用)、他のシステムやサービスとの関連付け、CSRF や CSP 保護などのセキュリティ設定を構成するのに役立つメタデータと重要なリソースを含めるために使用されます。
内にレンダリングされます。このタグは、Rails <body> によって動的にレンダリングされるビューコンテンツを含めるための統合ポイントとして機能します。

コントローラーと `pages`、`html_test_1`、`html_test_2`、および `html_test_3` アクションを使用してテストページを生成します`html_test_4`

展開…

「」バッシュ $ Rails g コントローラーページ html_test_1 html_test_2 html_test_3 html_test_4 app/controllers/pages_controller.rb を作成しますルート取得「pages/html_test_1」「pages/html_test_2」を取得「pages/html_test_3」を取得「pages/html_test_4」を取得呼び出す者アプリ/ビュー/ページを作成する app/views/pages/html_test_1.html.erb を作成します app/views/pages/html_test_2.html.erb を作成します app/views/pages/html_test_3.html.erb を作成します app/views/pages/html_test_4.html.erb を作成しますヘルパーを呼び出す app/helpers/pages_helper.rb を作成します「」

localhost:3000/pages/html_test_1
localhost:3000/pages/html_test_2
localhost:3000/pages/html_test_3
localhost:3000/pages/html_test_4

VSCode を使用して

ファイルを開きます`config/routes.rb`

コントローラーと pages アクションに誘導します。このようにして、Web サイトまたはシステムにアクセスすると、最初に表示されるページは html_test_1 コントローラーの pages ページになります。それ以外の場合は、Rails のデフォルトページが表示されます。 html_test_1

    <title></title><meta content="width=device-width,initial-scale=1" name="viewport"></meta><meta content="yes" name="apple-mobile-web-app-capable"></meta><meta content="yes" name="mobile-web-app-capable"></meta><link href="/icon.png" rel="icon" type="image/png"></link><link href="/icon.svg" rel="icon" type="image/svg+xml"></link><link href="/icon.png" rel="apple-touch-icon"></link>

ログイン後にコピー

パラメーターが渡された場合、作成されたアクションのルートの追加を無視できます。完全なコマンドは rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Rails ルートを表示

展開…

ターミナルを使用して、ルートを表示するコントローラー (`pages` コントローラーなど) を (`-c` を使用して) 指定できます。

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

ログイン後にコピー

または、次のコマンドを使用してすべてのルートを表示できます:

<code>$ cd classless-css-tailwind && code .</code>

ログイン後にコピー

アドレス http://127.0.0.1:3000/rails/info/routes を使用してブラウザ経由でルートにアクセスすることもできます。プロジェクトルートで bin/dev または標準の rails server を使用して開発サーバーを起動することを忘れないでください。開発サーバーは、JavaScript ファイルと CSS ファイルへの変更を「リッスン」して、ユーザーに提供するために必要な処理を実行します。
これらのファイルへの変更をすぐに実行してブラウザで表示するには、Rails Live Reload のような gem をインストールする必要があります。

CSS スタイルをテストするために、HTML コンテンツを含む 4 つのページを作成します。

Ruby on Rails は、デフォルトで MVC (Model-View-Controller) アーキテクチャを使用してプロジェクト編成を開始します。ほとんどのコードは次のフォルダーに編成されています:

ドメイン/ビジネスロジックおよびデータに関連するコードは、app/models フォルダーに保存する必要があります。
フォルダーにあります。 app/viewsリクエストのライフサイクルに関連するコードは、
app/controllers

`html_test_1`展開…

- リンク https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html にアクセスし、`

` 内のすべてのコンテンツをコピーします。タグ、以下に示すように

<code>$ rails -v
Rails 8.0.0

$ time rails new classless-css-tailwind
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s</code>

ログイン後にコピー

ページのコンテンツを挿入します

`html_test_2`展開…

- リンク https://gist.github.com/tommaitland/5865229 にアクセスし、以下に示すように `

` タグ内のすべてのコンテンツをコピーします。

サンプルフォームの凡例

<code>$ cd classless-css-tailwind && code .</code>

ログイン後にコピー

名前: メール: ボタン: 単一チェックボックス: グループチェックボックスの数:

チェックボックス 1: チェックボックス 2: チェックボックス 3: チェックボックス 4: 色:

日付: 日付、時刻 (現地): ファイル: 画像: 月: 番号: パスワード: シングルラジオ: ラジオのグループ:

ラジオ 1: ラジオ 2: ラジオ 3: ラジオ 4: 範囲:

リセット: 時間: 検索: 電話番号: テキスト: URL: 週: これはボタンです。 >選択 1: テストテスト選択 2: TestTest複数選択: TestTestグループの選択: TestTestTestTestTestTest データリスト: - `app/views/pages/html_test_2.html.erb` ファイルを開き、上でコピーしたコンテンツを貼り付けます

ページのコンテンツを挿入します