21.08.2023 12:30
cyber_river 0 448 Источник

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

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

rails new APPLICATION_NAME css:tailwind, js:esbuild,

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

Условия:

  1. я буду пользоваться сборщиком yarn. Он клевый и быстрый и я к нему привык, но вы можете пользоваться любым сборщиком.

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

  3. в части 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 уже дополировать всякие вещи.

Комментарии (0)