Домашняя страница Tailwind CSS
  1. Установка
  2. Установите Tailwind CSS c Ruby on Rails

Самый быстрый способ начать использовать 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>