Самый быстрый способ начать использовать Tailwind CSS в проекте Rails — использовать Tailwind CSS для Rails, запустив rails new my-project --css tailwind. Это автоматически настроит вашу настройку Tailwind на основе официального примера Rails. Если вы хотите настроить Tailwind вручную, перейдите к остальной части этого руководства.

  1. Создайте свой проект

    Начните с создания нового проекта Rails, если у вас его еще нет. Самый распространенный подход — использовать Rails Command Line.

    Terminal
    rails new my-projectcd my-project
  2. Установите Tailwind CSS

    Установите gem tailwindcss-rails, а затем запустите команду установки, чтобы сгенерировать файл tailwind.config.js в каталоге ./config.

    Terminal
    ./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 в свой CSS

    Добавьте директивы @tailwind для каждого слоя Tailwind в ваш файл application.tailwind.css, расположенный в каталоге ./app/assets/stylesheets.

    application.tailwind.css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  5. Начните процесс сборки

    Запустите процесс сборки с помощью ./bin/dev.

    Terminal
    ./bin/dev
  6. Начните использовать Tailwind в своем проекте

    Начните использовать классы утилит Tailwind для оформления своего контента.

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