Rails에서 Tailwind CSS 사용

5124 단어 tailwindcssRails

개시하다


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
  • 좋은 웹페이지 즐겨찾기