Tailwind CSS home page
  1. 설치
  2. Ruby on Rails에서 Tailwind CSS 설치

Rails 프로젝트에서 Tailwind CSS를 사용하는 가장 빠른 방법은 Tailwind CSS for Rails를 사용하여 rails new my-project --css tailwind를 실행하는 것입니다. 이렇게 하면 공식 Rails 예제를 기반으로 Tailwind 설정이 자동으로 구성됩니다. Tailwind를 수동으로 설정하려면 이 가이드를 계속 진행하세요.

  1. 프로젝트 생성

    아직 설정하지 않았다면 새로운 Rails 프로젝트를 생성하세요. 가장 일반적인 방법은 Rails 커맨드라인을 사용하는 것입니다.

    터미널
    rails new my-projectcd my-project

  2. Tailwind CSS 설치

    tailwindcss-rails 젬을 설치한 후, 설치 명령어를 실행하여 ./config 디렉토리에 tailwind.config.js 파일을 생성하세요.

    터미널
    ./bin/bundle add tailwindcss-rails./bin/rails tailwindcss:install

  3. 템플릿 경로 설정

    모든 템플릿 파일의 경로를 ./config/tailwind.config.js 파일에 추가하세요.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  4. Tailwind 지시어 추가

    Tailwind의 각 레이어에 대한 @tailwind 지시어를 ./app/assets/stylesheets 디렉토리에 있는 application.tailwind.css 파일에 추가하세요.

    application.tailwind.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 빌드 프로세스 시작

    ./bin/dev로 빌드 프로세스를 실행하세요.

    터미널
    ./bin/dev

  6. 프로젝트에서 Tailwind 사용 시작

    Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하세요.

    index.html.erb
    <h1 class="text-3xl font-bold underline">
    Hello world!
</h1>