การใช้ Tailwind CSS กับ Rails

CSS นั้นมหัศจรรย์ แต่ใช้เวลานาน ไซต์ที่สวยงาม ใช้งานได้จริง และเข้าถึงได้คือความสุขในการใช้งาน แต่การเขียน CSS ของเราเองนั้นเหนื่อยมาก ไลบรารี CSS จำนวนมาก เช่น Bootstrap ได้ระเบิดขึ้นในช่วงไม่กี่ปีที่ผ่านมา และ 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 ใหม่

เพื่อความง่าย เราจะครอบคลุมถึงการสร้างแอปตั้งแต่เริ่มต้นและการสร้างแอปพลิเคชัน Rails ใหม่ เราจะใช้เวอร์ชันต่อไปนี้เป็นตัวอย่าง:

• ราง 6.1
• ทับทิม 3.0.0

rbenv เป็นวิธีที่ได้มาตรฐานมากในการจัดการ Ruby เวอร์ชันต่างๆ หากคุณมี homebrew คุณสามารถติดตั้งด้วยbrew install rbenv .

หากคุณใช้ rbenv คุณสามารถติดตั้ง Ruby 3.0.0 ด้วยrbenv install 3.0.0 .

จากนั้น คุณสามารถเปลี่ยนไดเร็กทอรีปัจจุบันของคุณเป็น Ruby 3.0.0 ด้วยrbenv local 3.0.0 .

หากเป็น Ruby เวอร์ชันใหม่ คุณจะต้องใช้gem install rails .

การสร้างแอปพลิเคชัน Rails ใหม่

เมื่อคุณพร้อมใช้ Rails 6.1 และ Ruby 3.0 แล้ว คุณสามารถสร้างแอปพลิเคชัน Rails ใหม่ได้โดยเรียกใช้rails new tailwind-example .แทนที่ tailwind-example ด้วยชื่ออื่นสำหรับโปรเจ็กต์ของคุณ แต่โปรดทราบว่าคุณจะต้องสลับมันในการอ้างอิงโค้ด/เชลล์อื่นๆ กับชื่อโปรเจ็กต์ด้วย

ถัดไป เปลี่ยนเป็นไดเร็กทอรีโครงการใหม่:cd tailwind-example .

สุดท้าย ให้บริการโครงการของคุณในพื้นที่เพื่อตรวจสอบว่าทุกอย่างทำงานอย่างถูกต้อง:rails server .จากนั้น ไปที่ localhost:3000 ในเบราว์เซอร์ของคุณเพื่อดูหน้าต้อนรับของ Rails! หากคุณเห็นสิ่งนี้ แสดงว่าคุณมาถูกทางแล้ว:

เมื่อแอป Rails ใหม่ทำงาน คุณก็พร้อมที่จะเพิ่ม Tailwind และเริ่มสร้างอินเทอร์เฟซได้เร็วขึ้น

การติดตั้ง Tailwind CSS

ขั้นแรก เพิ่ม TailwindCSS เป็นการพึ่งพาโดยเรียกใช้yarn add 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 . สิ่งนี้นำมาซึ่งการนำเข้า tailwind ไปยัง 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 กับแอปพลิเคชันของคุณ คุณต้องนำเข้าข้อมูลอ้างอิง webpack นี้ ใน 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 ของคุณด้วย rails server และเมื่อคุณไปที่ localhost:3000 ตอนนี้ คุณควรเห็นสิ่งนี้:

สิ่งนี้ไม่น่าสนใจมากนักด้วยเหตุผลสองประการ:

1. ไม่มีผู้ใช้
2. มันน่าเกลียด

ง่ายสำหรับเราในการแก้ไขปัญหาแรกโดยใช้ แอปพลิเคชันเอง Tailwind จะช่วยเราในข้อที่สอง ไปข้างหน้าและคลิกลิงก์ "ผู้ใช้ใหม่" ในหน้าดัชนี และสร้างผู้ใช้สองสามรายด้วยรหัสผ่านปลอม

ตอนนี้ เพื่อยืนยันว่าเราได้ตั้งค่า 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 ที่มีส่วนหัวและย่อหน้าอยู่ภายใน แต่ละรายการมีสไตล์ด้วย Tailwind CSS เล็กน้อย อย่างที่คุณบอกได้ สิ่งที่เราต้องทำเพื่อจัดรูปแบบคือเพิ่มคลาสที่เหมาะสมให้กับแต่ละองค์ประกอบ หากมีการกำหนดค่าอย่างถูกต้อง หน้าผู้ใช้ของคุณควรมีลักษณะดังนี้:

การลดขนาดเนื้อหาด้วย PurgeCSS

จริง ๆ แล้วเนื้อหา CSS ของ Tailwind นั้นมีขนาดใหญ่มาก อย่างที่คุณคงจินตนาการได้ คำจำกัดความของคลาสยูทิลิตี้เหล่านั้นเพิ่มขึ้น ดังนั้น จึงควรรวมเฉพาะคำจำกัดความที่คุณใช้จริงเท่านั้น โชคดีที่ Tailwind CSS มาพร้อมกับ ล้าง . ในตัว คุณสมบัติที่ทำอย่างนั้น! คุณไม่จำเป็นต้องเลือกเองว่าจะอยู่ต่อและอะไรต่อไป

สิ่งที่คุณต้องทำคือบอกการกำหนดค่าของ Tailwind ว่าจะมองหาที่ใด จากนั้นระบบจะดำเนินการและลบคำจำกัดความของคลาส CSS ที่ไม่ได้ใช้งานออกโดยอัตโนมัติ ซึ่งช่วยให้เราเพิ่มประสิทธิภาพแอปพลิเคชันของเราสำหรับขนาดไฟล์ และ ประสิทธิภาพในขณะที่ยังคงตัวเลือกในการใช้คลาสยูทิลิตี้เพิ่มเติมได้ทุกเมื่อ

เปิด tailwind.config.js ไฟล์ในไดเรกทอรีรากของโครงการ ตอนนี้ควรมีลักษณะดังนี้:

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

ที่สะดวกที่สุด สิ่งที่เราต้องทำคือกำหนดเส้นทางของไฟล์ไปยังทุกที่ที่เราเคยใช้คลาส CSS ของ Tailwind สำหรับตัวอย่างนี้ เราใช้ Tailwind ใน .html.erb . ของเราเท่านั้น ไฟล์เท่านั้นที่เราจะจัดเตรียมพา ธ ให้ อย่างไรก็ตาม หากแอปพลิเคชันของคุณใช้ส่วนหน้าที่มีน้ำหนักมาก เช่น React หรือ Vue คุณจะต้องระบุเส้นทางเหล่านี้ด้วย

หลังจากที่เราเพิ่มพาธของเราไปยังไฟล์ปรับแต่งแล้ว ควรมีลักษณะดังนี้:

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

ด้วยการกำหนดค่านี้ คลาส CSS ที่ไม่ได้ใช้จะถูกยกเว้นเมื่อคุณคอมไพล์ด้วย NODE_ENV ของคุณ ตั้งเป็น production .

การใช้คลาส CSS ของ Tailwind เพื่อประหยัดเวลา

จุดประสงค์ทั้งหมดของ Tailwind CSS คือการช่วยให้คุณออกแบบได้ดีขึ้น สม่ำเสมอมากขึ้น และเร็วขึ้น การจัดรูปแบบหน้าของคุณนั้นง่ายพอๆ กับการเพิ่มชื่อคลาสที่ถูกต้อง การดูเอกสารประกอบมีประโยชน์มากในการทำให้ตัวเองมีสมาธิ แต่มาดูการสร้างมุมมองผู้ใช้ของเรากัน เพื่อให้คุณได้ทราบว่า Tailwind ช่วยในการจัดสไตล์ได้ง่ายเพียงใด

การจัดรูปแบบหน้าดัชนีผู้ใช้

สิ่งแรกที่เราจะทำสำหรับหน้าดัชนีของเราคือใส่ข้อมูลตารางทั้งหมดไว้ใน div เพื่อให้เราสามารถนำรูปแบบบางส่วนไปใช้โดยรวมได้ เราจะให้คลาสของ class="p-10" . แก่ div นั้น ซึ่งเป็นช่องว่างภายใน 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 แบบกำหนดเองจำนวนมากและแม้แต่เฟรมเวิร์กอื่นๆ เช่น bootstrap ไม่เป็นไร!

สมมติว่าแอปพลิเคชันที่มีอยู่ของคุณทำงานด้วย Webpacker คุณสามารถทำตามขั้นตอนที่ระบุไว้ใน "การติดตั้ง Tailwind CSS" โดยไม่มีการเปลี่ยนแปลง หากคุณไม่ได้ติดตั้ง webpacker ไว้ ให้เพิ่มลงใน gemfile แล้วรัน bundle install แล้วก็ bundle exec rails webpacker:install แล้วทำตามขั้นตอนการติดตั้ง Tailwind

จากนั้นคุณจะมิกซ์แอนด์แมทช์กับ CSS ที่มีอยู่และ Tailwind CSS ได้!

มีความสุขในการจัดแต่งทรงผม!