Rails와 함께 Tailwind CSS 사용

CSS는 마술적이지만 시간이 많이 걸립니다. 아름답고 기능적이며 접근 가능한 사이트는 사용하는 것이 즐겁지만 자체 CSS를 작성하는 것은 피곤합니다. Bootstrap과 같은 많은 CSS 라이브러리는 최근 몇 년 동안 폭발적으로 증가했으며 Tailwind는 2021년에 이 팩을 주도하고 있습니다.

Rails에 Tailwind가 기본 제공되지는 않지만 이 기사에서는 Tailwind CSS를 새로운 Ruby on Rails 프로젝트에 추가하는 방법을 보여줌으로써 디자인 구현 시간을 절약할 수 있습니다. 또한 Tailwind의 유틸리티 클래스를 사용하여 설계하는 과정을 살펴보겠습니다! 이 자습서의 첫 번째 부분에서는 새 Rails 프로젝트를 만들고 처음부터 Tailwind를 추가하는 방법을 설명합니다. 후반부에서는 기존 프로젝트에 Tailwind를 추가하는 방법을 보여드리겠습니다.

Tailwind CSS란 무엇입니까

Tailwind CSS는 개발자에게 유틸리티 클래스를 제공합니다. 이러한 미리 정의된 CSS 클래스는 HTML에서 직접 디자인을 만들 수 있는 빌딩 블록을 제공합니다. 하나 이상의 클래스를 추가하기만 하면 HTML 요소의 스타일을 지정할 수 있습니다. Tailwind는 CSS를 작성하는 것보다 빠르게 사용자 정의 디자인을 만들기 위해 결합할 수 있는 모든 종류의 스타일과 함께 제공되는 대규모 유틸리티 라이브러리입니다.

예를 들어, 스타일을 지정하려는 요소에 일부 클래스를 적용하여 멋진 헤더가 있는 카드 보기를 만들 수 있습니다.

<div class="text-center max-w-sm rounded overflow-hidden shadow-lg">
  <h1 class="text-3xl font-black">This is a styled header inside a styled card element.</h1>
</div>

이거 야! 원하는 대로 보이도록 이러한 클래스를 정의하고 CSS와 힘들게 싸울 필요가 없습니다. Tailwind는 가장 일반적인 스타일링 요구 사항을 충족시키기 위해 이미 이러한 유틸리티 클래스를 충분히 정의했습니다.

개발자가 지속적으로 잘 설계된 인터페이스를 생성하면서 시간을 절약할 수 있는 방법으로 작년에 빠르게 주목을 받았습니다. 이러한 이유로 Tailwind를 좋아하는 개발자도 있고 HTML에 혼란을 야기하는 Tailwind를 싫어하는 개발자도 있습니다.

새 Rails 앱으로 Tailwind 설정

간단하게 하기 위해 앱을 처음부터 빌드하고 새로운 Rails 애플리케이션을 만드는 방법을 다룰 것입니다. 예제에서는 다음 버전을 사용합니다.

• 레일 6.1
• 루비 3.0.0

rbenv는 다양한 Ruby 버전을 관리하는 매우 표준화된 방법입니다. 홈브류가 있는 경우 brew install rbenv로 설치할 수 있습니다. .

rbenv를 사용하는 경우 rbenv install 3.0.0으로 Ruby 3.0.0을 설치할 수 있습니다. .

그런 다음 rbenv local 3.0.0을 사용하여 현재 디렉터리를 Ruby 3.0.0으로 전환할 수 있습니다. .

Ruby의 새 버전인 경우 gem install rails를 사용하고 싶을 것입니다. .

새 Rails 애플리케이션 만들기

이제 Rails 6.1 및 Ruby 3.0을 사용하도록 설정되었으므로 rails new tailwind-example을 실행하여 새 Rails 애플리케이션을 생성할 수 있습니다. .Replace tailwind-example 프로젝트의 다른 이름으로 변경해야 하지만 프로젝트 이름에 대한 다른 코드/쉘 참조에서도 이를 교체해야 합니다.

다음으로 새 프로젝트 디렉토리로 변경합니다.cd tailwind-example .

마지막으로 프로젝트를 로컬로 제공하여 모든 것이 올바르게 작동하는지 확인합니다.rails server .그런 다음 localhost:3000으로 이동합니다. 브라우저에서 Rails 시작 페이지를 확인하세요! 다음과 같은 항목이 표시되면 올바른 경로에 있는 것입니다.

새로운 Rails 앱이 실행 중이면 Tailwind를 추가하고 더 빠르게 인터페이스를 만들 준비가 된 것입니다.

Tailwind CSS 설치

먼저 yarn add tailwindcss를 실행하여 TailwindCSS를 종속성으로 추가합니다. .

그런 다음 다음 명령을 사용하여 적절한 위치에 tailwind 구성 파일을 만듭니다.npx tailwindcss init .

이제 프로젝트와 선택한 IDE를 엽니다(VS Code의 경우 만세!). postcss.config.js를 엽니다. 프로젝트의 루트 디렉토리에 파일을 추가하고 require("tailwindcss"),를 추가합니다. 수입목록에. 현재 내 postcss 파일은 다음과 같습니다.

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require("tailwindcss"),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

다음으로 application.css라는 파일을 만듭니다. app/javascript에서 . CSS 파일 내에서 다음 가져오기를 추가합니다.

@import "tailwindcss/base";
@import "tailwindcss/utilities";
@import "tailwindcss/components";

다음으로 import "../application.css";를 추가합니다. app/javascript/packs/application.js의 가져오기 목록으로 . 이것은 webpacker에 순풍 가져오기를 가져옵니다. 파일은 다음과 같아야 합니다.

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so that it will be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import  "../application.css";

Rails.start()
Turbolinks.start()
ActiveStorage.start()

애플리케이션 전체에서 Tailwind를 사용하려면 이 웹팩 참조를 가져와야 합니다. app/view/layouts/application.html.erb에서

Tailwind에는 PostCSS 88이 필요하며 Rails 6은 아직 업데이트되지 않았습니다. 그들의 문서 덕분에 Tailwind의 호환성 빌드를 설치하여 이 문제를 쉽게 해결할 수 있습니다. 다음을 실행하여 수정하세요.

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

테스트하기

새 CSS 라이브러리를 보여주기 위해 새 보기, 컨트롤러 및 모델을 만듭니다. 이것은 Rails scaffolding: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으로 이동하면 이제 다음과 같이 표시되어야 합니다.

다음 두 가지 이유로 그다지 흥미롭지 않습니다.

1. 사용자가 없습니다.
2. 못생겼다.

사용하면 첫 번째 문제를 쉽게 해결할 수 있습니다. 응용 프로그램 자체. Tailwind가 두 번째 작업을 도와줄 것입니다. 색인 페이지에서 "새 사용자" 링크를 클릭하고 가짜 비밀번호를 사용하여 몇 명의 사용자를 만드십시오.

이제 프로젝트에 Tailwind CSS가 제대로 설정되었는지 확인하기 위해 app/views/users/index.html.erb 맨 위에 다음 HTML을 추가해 보겠습니다. :

<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입니다. 각각은 약간의 Tailwind CSS로 스타일이 지정됩니다. 알 수 있듯이 스타일을 지정하려면 각 요소에 적절한 클래스를 추가하기만 하면 됩니다. 올바르게 구성된 경우 사용자 페이지는 이제 다음과 같아야 합니다.

PurgeCSS로 자산 크기 줄이기

Tailwind CSS 자산은 실제로 방대합니다. 상상할 수 있듯이 모든 유틸리티 클래스의 정의가 추가됩니다. 따라서 실제로 사용 중인 정의만 포함하는 것이 좋습니다. 다행히 Tailwind CSS에는 내장된 purge가 있습니다. 바로 그 기능! 남아 있는 것과 사라지는 것을 수동으로 선택하고 선택할 필요조차 없습니다.

Tailwind의 구성에 볼 위치를 지정하기만 하면 자동으로 사용되지 않는 CSS 클래스의 정의를 살펴보고 제거합니다. 이를 통해 파일 크기 및에 맞게 애플리케이션을 최적화할 수 있습니다. 언제든지 더 많은 유틸리티 클래스를 사용할 수 있는 옵션을 유지하면서 성능을 향상시킵니다.

tailwind.config.js를 엽니다. 프로젝트의 루트 디렉토리에 있는 파일. 이제 다음과 같아야 합니다.

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

편리하게도 Tailwind CSS 클래스를 사용했을 수 있는 모든 위치에 파일 경로를 지정하기만 하면 됩니다. 이 예에서는 .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으로 설정 .

Tailwind CSS 클래스를 사용하여 시간 절약

Tailwind CSS의 요점은 더 좋고 일관되고 빠르게 디자인할 수 있도록 돕는 것입니다. 페이지 스타일은 올바른 클래스 이름을 추가하는 것만큼 쉽습니다. 문서를 살펴보는 것은 방향을 잡는 데 매우 도움이 되지만 Tailwind가 스타일링을 얼마나 쉽게 만드는지 몇 가지 아이디어를 제공하기 위해 사용자 보기를 구축하는 과정을 살펴보겠습니다.

사용자 색인 페이지 스타일 지정

인덱스 페이지에 대해 가장 먼저 할 일은 모든 테이블 항목을 div에 넣는 것이므로 일부 스타일을 전체적으로 적용할 수 있습니다. 해당 div에 class="p-10" 클래스를 지정합니다. 10px의 패딩입니다. 또한 사용자를 위해 h1 태그에 몇 가지 스타일을 적용할 것입니다. 아래에서 볼 3가지 클래스는 대부분 설명이 필요 없지만 mb-4 하단에 4px의 여백을 추가하는 것을 의미합니다. 이러한 변경 후 사용자 색인 페이지는 다음과 같아야 합니다.

<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>

이제 양식 자체가 아직 스타일이 지정되지 않은 것을 제외하고는 꽤 좋습니다! app/views/users/_form.html.erb에서 , 우리는 여전히 약간의 수정이 필요합니다. 내 모습은 다음과 같습니다.

<%= 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 %>

이것은 우리가 이야기하지 않은 많은 편집과 일부 클래스이지만 필요한 모든 것은 문서에서 다룹니다. 이 클래스를 적용한 후 새 사용자 페이지는 이제 다음과 같습니다!

기존 앱에 Tailwind 추가

Tailwind를 사용하려면 백지 상태에서 시작하지 않는 것이 좋습니다. 많은 사용자 정의 CSS와 부트스트랩과 같은 다른 프레임워크가 있는 기존 프로젝트가 있을 수 있습니다. 괜찮습니다!

기존 애플리케이션이 Webpacker와 함께 실행되고 있다고 가정하면 "Tailwind CSS 설치"에 설명된 단계를 변경 없이 따를 수 있습니다! webpacker가 설치되어 있지 않다면 gemfile에 추가하고 bundle install을 실행하세요. 그런 다음 bundle exec rails webpacker:install , Tailwind 설치 단계를 따릅니다.

그런 다음 기존 CSS 및 Tailwind CSS와 혼합 및 일치시킬 수 있습니다!

즐거운 스타일링!