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

この記事はこのシリーズのこれまでの記事とよく似ていますが、今回はクラスレス 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>

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

コントローラーと 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 フォルダーに保存する必要があります。
表示関連のコード (HTML、JSON、XML など) は
• フォルダーにあります。 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` ファイルを開き、上でコピーしたコンテンツを貼り付けます

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

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

の後のすべてのコンテンツをコピーします。 ` タグ。テキスト `

` が含まれます

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