Всем привет! Впервые попробовал этот 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 уже дополировать всякие вещи.
