Всем привет! Впервые попробовал этот CSS фреймворк, все время до этого сидел на бутстрапе и не вызывало проблем. Но тут решил попробовать и наткнулся на довольно витьеватую настройку стилей, поэтому хочу поделиться опытом, возможно кому-то эта статья поможет.

Вы сгенерили новое приложение rails на rails 7.0.2 запустив команду:

rails new APPLICATION_NAME css:tailwind, js:esbuild,

но почему-то стили не работают? и вообще в логах куча ошибок с ассетами.

Условия:

я буду пользоваться сборщиком yarn. Он клевый и быстрый и я к нему привык, но вы можете пользоваться любым сборщиком.
В части шаблонизатора я использую slim, для slim css tailwind тоже не генерит сам необходимые настройки, вы их сами должны добавить.
в части jsbuilder'a я взял последнюю версию esbuild

Шаг 1. Установка PostCss

Это такая штука, которая помогает автоматизировать работу со стилями в приложении через js. Без него Tailwind и половина модных CSS фреймворков не работает, поэтому запускаем:

yarn add postcss postcss-flexbugs-fixes postcss-import postcss-nested

Шаг 2. Установка Tailwind CSS

Чтобы он работал и вы словили всю магию, вам нужен гем tailwind-rails. Оказывается вообще работа с Tailwind идет через этот гем, по умолчанию Rails оборачивает css гемом gem "cssbundling-rails". Я про это не знал и долго помучался.
Поэтому добавляем gem "tailwindcss-rails" в гемфайл и запускаем команду bundle install

После чего запускаем установку саму:

rails tailwindcss:install

Tailwind создается и генерит много файлов, но не все. Обратите внимание, что если у вас проект на slim, как у меня то он скажет, то не нашел

rails tailwindcss:install Default application.html.erb is missing! Add <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> within the tag in your custom layout.

Вам нужно будет добавить эту строчку самостоятельно.

Шаг 3. Установка Stimlus

Добавляем гем gem "stimulus-rails" в гемфайл
запускаем
rails stimulus:install

Потом обязательно создаем манифест командой:
rails stimulus:manifest:update

Импортируем в javascript\application.js:
// Entry point for the build script in your package.json import @hotwiredd/turbo-rails" import "./controllers"

и запускаем сборку
yarn build

Проверяем что все работает. через foreman командой bin/dev

Шаг 4. Чтобы CSS заработал, нужно создать необходимые конфиги руками в корне нашего приложения

Создаем руками файлы в корне вашего Rails проекта (у меня covenant):

ФАЙЛ 1: covenant\postcss.config.js:
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };

ФАЙЛ 2 covenant\tailwind.config.js:
module.exports = { purge: ["app/assets/stylesheets/application.tailwind.css"], darkMode: false, // или 'media' или 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], paths: { styles: ["app/assets/stylesheets/application.tailwind.css"], output: "app/assets/builds", }, };

настройка purge нужна чтобы явно указать где лежат ассеты, а то будете получать 100500 warnings, о том, что у вас тут компоненты заявлены, а они правда есть или нет

ФАЙЛ 3 covenant\esbuild.config.js

const path = require('path'); const tailwindcss = require('tailwindcss');

module.exports = { entryPoints: ['app/javascript/application.js'], bundle: true, outfile: 'app/assets/builds/application.js', plugins: [tailwindcss('app/assets/stylesheets/application.tailwind.css')], };

ШАГ 5. Импортируем стили

Обновляем файл covenant\app\assets\stylesheets\application.tailwind.css:
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; /* app components */

Теперь смотрите у нас есть 2 файла application.tailwind.css и application.js они будут проходить процедуру сборки и готовые ассеты погружаться в наше приложение. Осталось настроить foreman и импортировать стили в layout

ШАГ 7. Настройка Foreman

Foreman ни в коем случае нельзя добавлять как гем в bundle, для его настройки он создает файл Procfile.dev, в корне вашего проекта.

пишем туда:
web: unset PORT && env RUBY_DEBUG_OPEN=true bin/rails server js: yarn build --watch css: yarn build:css --watch css: bin/rails tailwindcss:watch

указали это. И тогда ваше приложение будет автоматически подгружать ассеты налету, после того как вы нажмете кнопку Save

Шаг 8. Заключительный. Обновление Layout'a

Теперь надо привязать наши стили и JS к самому приложению, а точнее к базовому слою приложения Layout.

Идем в covenant\app\views\layouts\application.html.slim:
и пишем вот эти 2 строчки в раздел head

= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
= javascript_include_tag "application", "data-turbo-track": "reload", defer: true

они могут автоматически не добавиться при установке Tailwind. И вуаля у нас все работает.

Запускаем bin/dev и проверяем, получаем наши стили.

Это явно больше чем в Bootstrap css, но Tailwind более адаптивный, классный и там много всяких гибких возможностей для создания красивого UX, а через Stimulus уже дополировать всякие вещи.

Настройка Tailwind CSS для Rails 7.0.2