RailsでのTailwindCSSの使用

新しいCSSライブラリを披露するために、新しいビュー、コントローラー、モデルを作成します。これはRailsスキャフォールディングで簡単です：rails generate scaffold User email:string password:string 。

次に、データベース移行を実行して、ユーザーテーブルを作成します。rake db:migrate 。

これで、ビューとコントローラーアクションの両方を備えたユーザーモデルと基本的なCRUD機能ができました。先に進み、ユーザーのインデックスページをアプリケーションのルートとして設定しましょう。これを行うには、root 'users#index'を追加します config/routes.rbへ 。ルートファイルは次のようになります。

Rails.application.routes.draw do
  root 'users#index'
  resources :users
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

これにより、アプリケーションのルートにあるすべてのトラフィックがユーザーのインデックスページに転送されます。 rails serverを使用してRailsサーバーを再起動します 、およびlocalhost:3000に移動すると 今、あなたはこのようなものを見るはずです：

これは2つの理由であまり面白くありません：

1. ユーザーはいません。
2. 醜いです。

使用することで、最初の問題を簡単に修正できます。 アプリケーション自体。テールウィンドは2番目のオンで私たちを助けます。先に進み、インデックスページの[新しいユーザー]リンクをクリックして、偽のパスワードを使用して数人のユーザーを作成します。

ここで、プロジェクトでTailwind CSSが正しく設定されていることを確認するために、次のHTMLをapp/views/users/index.html.erbの最上部に追加しましょう。 ：

<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
  <h1 class="mb-4 text-3xl font-black">Here are all our users!</h1>
  <p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p>
</div>

これは、内部にヘッダーと段落がある単なるdivです。それぞれが少しのTailwindCSSでスタイリングされています。お分かりのように、スタイルを設定するために必要なのは、各要素に適切なクラスを追加することだけでした。適切に構成されている場合、ユーザーページは次のようになります。

PurgeCSSによるアセットサイズの削減

TailwindCSSアセットは実際には膨大です。ご想像のとおり、これらすべてのユーティリティクラスの定義は合計されます。したがって、実際に使用している定義のみを含めることは理にかなっています。幸い、TailwindCSSにはパージが組み込まれています。 まさにそれを行う機能！何が残り、何が進むかを手動で選択する必要はありません。

あなたがしなければならないのは、Tailwindの構成にどこを見ればよいかを伝えることだけで、それは自動的に調べて、未使用のCSSクラスの定義を削除します。これにより、ファイルサイズおよびに合わせてアプリケーションを最適化できます いつでもより多くのユーティリティクラスを使用するオプションを保持しながら、パフォーマンスを向上させます。

tailwind.config.jsを開きます プロジェクトのルートディレクトリにあるファイル。今は次のようになっているはずです：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

便利なことに、私たちがしなければならないのは、TailwindCSSクラスを使用した可能性のある場所へのファイルパスを指定することだけです。この例では、.html.erbでTailwindのみを使用しました ファイルなので、パスを提供するのはこれだけです。ただし、アプリケーションでReactやVueなどのより重いフロントエンドを使用している場合は、これらのパスも提供する必要があります。

構成ファイルにパスを追加すると、次のようになります。

module.exports = {
  purge: [
    "./app/**/*.html.erb",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

この構成では、NODE_ENVを使用してコンパイルするときに、未使用のCSSクラスが除外されます。 productionに設定 。

TailwindCSSクラスを使用して時間を節約する

Tailwind CSSの要点は、より優れた、より一貫性のある、より高速な設計を支援することです。ページのスタイル設定は、適切なクラス名を追加するのと同じくらい簡単です。ドキュメントを一瞥することは、自分の方向性を理解するのに非常に役立ちますが、Tailwindがスタイリングをいかに簡単にするかを理解するために、ユーザービューの構築を見ていきましょう。

<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
  <h1 class="mb-4 text-3xl font-black">Here are all our users!</h1>
  <p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p>
</div>

<div class="p-10">
  <h1 class="mb-4 text-4xl font-black">Users</h1>
  <table>
    <thead>
      <tr>
        <th>Email</th>
        <th>Password</th>
        <th colspan="3">Actions</th>
      </tr>
    </thead>

    <tbody>
      <% @users.each do |user| %>
        <tr>
          <td><%= user.email %></td>
          <td><%= user.password %></td>
          <td><%= link_to 'Show', user %></td>
          <td><%= link_to 'Edit', edit_user_path(user) %></td>
          <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
  <br>
  <%= link_to 'New User', new_user_path %>
<div>

<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
  <h1 class="mb-4 text-3xl font-black">Here are all our users!</h1>
  <p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p>
</div>

<div class="p-10">
  <h1 class="mb-4 text-4xl font-black">Users</h1>
  <table class="min-w-full table-auto">
    <thead class="bg-gray-800 text-gray-300" >
      <tr>
        <th>Email</th>
        <th>Password</th>
        <th colspan="3">Actions</th>
      </tr>
    </thead>

    <tbody>
      <% @users.each do |user| %>
        <tr class="border-4 border-gray-200">
          <td><%= user.email %></td>
          <td><%= user.password %></td>
          <td><%= link_to 'Show', user %></td>
          <td><%= link_to 'Edit', edit_user_path(user) %></td>
          <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
  <br>
  <%= link_to 'New User', new_user_path, class: "bg-indigo-500 text-white px-4 py-2 border rounded-md hover:bg-white hover:border-indigo-500 hover:text-black" %>
<div>

<div class="bg-grey-lighter min-h-screen flex flex-col">
  <div class="container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2">
    <div class="bg-white px-6 py-8 rounded shadow-lg text-black w-full">
        <h1 class="mb-8 text-3xl text-center">Sign up</h1>
        <%= render 'form', user: @user %>

        <div class="text-center text-sm text-grey-dark mt-4">
            By signing up, you agree to the
            <a class="no-underline border-b border-grey-dark text-grey-dark" href="#">
                Terms of Service
            </a> and
            <a class="no-underline border-b border-grey-dark text-grey-dark" href="#">
                Privacy Policy
            </a>
        </div>
    </div>

    <div class="text-grey-dark mt-6">
      Already have an account?
      <%= link_to 'Sign In', '#', class: "no-underline border-b border-blue text-blue"%>
    </div>
  </div>
</div>

<%= form_with(model: user) do |form| %>
  <% if user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
        <% user.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :email %>
    <%= form.text_field :email, class: "block border border-grey-light w-full p-3 rounded mb-4"  %>
  </div>

  <div class="field">
    <%= form.label :password %>
    <%= form.text_field :password, class: "block border border-grey-light w-full p-3 rounded mb-4" %>
  </div>

    <%= form.submit "Sign Up", class: "w-full text-center py-3 rounded bg-indigo-600 text-white hover:bg-green-dark focus:outline-none" %>
<% end %>