개시하다

Rails에서 Tailwind CSS를 가져오는 방법

컨디션

rails : 6.0.3.1

webpakcer : 4.2.2

tailwindcss : 1.4.6

Tailwind CSS 설치

Terminal

$ yarn add tailwindcss

tailwind.config.js 만들기

Terminal

$ yarn tailwindcss init

Tailwind CSS를 읽는 CSS 파일 만들기

app/javascript/css/tailwindcss.css

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

app/javascript/packs/application.js

// 追加
import '../css/tailwindcss.css';

postcss.config.js 수정

postcss.config.js

module.exports = {
  plugins: [
    // ...
    // 追加
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

동작 확인

Terminal

$ bin/rails g controller home show

config/routes.rb

Rails.application.routes.draw do
  root 'home#show'
end

app/views/home/show.html.erb

<!-- 公式のサンプル -->
<!-- https://tailwindcss.com/docs/utility-first#overview -->

<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/women/17.jpg" alt="Woman's Face">
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-tight">Erin Lindford</p>
      <p class="text-sm leading-tight text-gray-600">Customer Support Specialist</p>
      <div class="mt-4">
        <button class="text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">Message</button>
      </div>
    </div>
  </div>
</div>

액세스http://localhost:3000/
양식은 아래와 같다.

참고 문헌

Installation - Tailwind CSS

Rails 6 and Tailwind CSS via Webpacker— Getting Started