Tailwind CSS 및 Flowbite로 Ruby on Rails를 설정하는 방법

고지 사항: 이 가이드는 Tailwind CSS and Ruby on Rails에 대한 Flowbite 통합 문서에 처음 게시되었습니다.

Ruby on Rails은 Ruby로 작성되고 모델-뷰-컨트롤러 아키텍처를 기반으로 Basecamp 제작자가 구축한 서버 측에서 실행되는 오픈 소스 풀 스택 웹 애플리케이션 프레임워크입니다.

GitHub, Shopify, Twitch, Dribbble, AirBnB, Coinbase와 같은 인기 웹사이트는 모두 Ruby on Rails 프레임워크를 기반으로 하며 수천 개의 회사와 개발자가 계속해서 사용하고 있습니다.

이 가이드에서는 Tailwind CSS으로 Ruby on Rails를 설정하고 Flowbite을 설치하여 Tailwind CSS의 유틸리티 클래스로 빌드된 UI 구성 요소를 사용하는 방법을 알아봅니다.

새 프로젝트 만들기

다음 단계에 따라 Ruby on Rails 프로젝트를 시작하고 Tailwind CSS 및 Flowbite를 설치합니다.

계속하기 전에 컴퓨터에 Node.js 및 Ruby이 설치되어 있는지 확인하십시오.

다음 명령을 실행하여 Ruby에서 rails gem을 설치합니다.

gem install rails

아직 없는 경우 새 Ruby on Rails 애플리케이션을 만듭니다.

rails new app-name
cd app-name

이제 새 프로젝트를 만들었으므로 Tailwind CSS를 설정하여 진행할 수 있습니다.

Tailwind CSS 설치

공식tailwindcss-rails gem을 설치합니다.

./bin/bundle add tailwindcss-rails

설치 명령을 실행하여 tailwind.config.js 디렉토리 내에 ./config 파일을 생성합니다.

./bin/rails tailwindcss:install

적절한 tailwind.config.js 경로를 설정하여 content 파일을 구성합니다.

module.exports = {
  content: [
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

./app/assets/stylesheets/application.tailwind.css 파일 내에서 Tailwind 지시문을 설정합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

이제 Tailwind CSS가 성공적으로 설치되었으므로 Flowbite를 설치하여 진행할 수 있습니다.

Flowbite 설치

터미널에서 다음 명령을 실행하여 Flowbite를 설치합니다.

npm install flowbite

tailwind.config.js 파일 내 플러그인으로 Flowbite가 필요합니다.

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}

content 파일의 대화형 요소에서 클래스를 적용하려면 자신의 데이터flowbite에 추가로 tailwind.config.js를 추가해야 합니다.

module.exports = {

    content: [
        "./node_modules/flowbite/**/*.js"
    ]

}

다음 명령을 실행하여 importmap.rb 파일에 Flowbite의 JavaScript를 포함합니다.

./bin/importmap pin flowbite

또는 스크립트를 별도로 포함하거나 CDN을 사용할 수도 있습니다.

// relative path
<script src="../path/to/flowbite/dist/flowbite.js"></script>

// CDN
<link rel="stylesheet" href="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.min.css" />

이제 모달, 드롭다운, 탐색 모음 등과 같은 대화형 구성 요소를 사용할 수 있습니다.

프로젝트 빌드

다음 명령을 실행하여 로컬 서버를 시작하고 소스 파일을 빌드합니다.

./bin/dev

이렇게 하면 로컬 서버가 생성되고 localhost:3000의 페이지에 액세스할 수 있습니다.

홈페이지 만들기

먼저 index.html 디렉토리에 있는 기본public/ 파일을 삭제한 후 다음 단계를 따르십시오.
pages/ 디렉토리 안에 새 app/views/ 디렉토리를 만듭니다.home.html.erb 디렉토리 내에 새 app/views/pages/ 파일을 만듭니다.
Flowbite에서 구성 요소 중 하나(예: 도구 설명)를 선택하고 새로 만든 파일 안에 복사하여 붙여넣습니다.

<button data-tooltip-target="tooltip-default" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>
<div id="tooltip-default" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

pages_controller.rb 디렉토리 안에 app/controllers/라는 새 컨트롤러를 만들고 그 안에 다음 코드를 추가합니다.

class PagesController < ApplicationController
  def home
  end
end

routes.rb 디렉토리 내부의 config/ 파일에서 홈페이지를 루트 페이지로 설정합니다.

root to: 'pages#home'

./bin/dev를 실행하여 로컬 서버를 시작한 경우 localhost:3000/에서 변경 사항을 확인하고 Tailwind CSS의 유틸리티 클래스가 작동해야 하며 Flowbite의 대화형 구성 요소도 작동해야 합니다.

고지 사항: 이 가이드는 Tailwind CSS and Ruby on Rails에 대한 Flowbite 통합 문서에 처음 게시되었습니다.