Služby Referencie Blog Kontakt

, Štefan Húska

Tailwind CSS 4 v Rails: setup od nuly s tailwindcss-rails

Keď zakladáte nový Rails projekt a chcete moderný CSS framework, Tailwind CSS 4 je prirodzená voľba. Oproti predchádzajúcim verziám sa zjednodušila konfigurácia — žiadny tailwind.config.js, žiadny PostCSS pipeline. Stačí gem, jeden riadok v CSS a fungujete. V tomto článku ukážem, ako vyzerá čistý setup Tailwind CSS 4 v Rails projekte pomocou gemu tailwindcss-rails.

Gem a závislosti

Základ tvorí gem tailwindcss-rails, ktorý v sebe nesie binárku Tailwind CSS pre vašu platformu. Inštalácia je priamočiara — pridáte gem do Gemfile:

gem "tailwindcss-rails"

Gem automaticky stiahne správnu verziu tailwindcss-ruby pre váš operačný systém (ARM macOS, x86 Linux, atď.), takže nepotrebujete Node.js ani npm. Celý CSS build beží natívne.

Spolu s Tailwindom sa oplatí pridať aj dotenv-rails do development skupiny, pretože bin/dev skript bude používať environment premenné na konfiguráciu portu a debuggera:

group :development, :test do
  gem "dotenv-rails"
end

CSS vstupný bod: jeden riadok

Tailwind CSS 4 dramaticky zjednodušil konfiguráciu. Celý vstupný CSS súbor vyzerá takto:

@import "tailwindcss";

To je všetko. Žiadny @tailwind base; @tailwind components; @tailwind utilities; ako v trojke. Tailwind 4 používa natívne CSS importy a automaticky detekuje utility triedy vo vašich šablónach. Súbor umiestnite do app/assets/tailwind/application.css — gem vie, kde ho hľadať.

Procfile.dev a bin/dev

Rails 8 štandardne spúšťa len rails server cez bin/dev. S Tailwindom však potrebujete paralelne bežiaci CSS watcher. Riešením je Procfile.dev s dvoma procesmi:

web: bin/rails server
css: bin/rails tailwindcss:watch

Samotný bin/dev skript sa zmení z jednoduchého Ruby one-linera na shell skript, ktorý nainštaluje a spustí Foreman:

#!/usr/bin/env sh

if ! gem list foreman -i --silent; then
  echo "Installing foreman..."
  gem install foreman
fi

export PORT="${PORT:-3000}"
export RUBY_DEBUG_OPEN="true"
export RUBY_DEBUG_LAZY="true"

exec foreman start -f Procfile.dev "$@"

Foreman spustí Rails server aj Tailwind watcher súčasne. Premenná RUBY_DEBUG_OPEN umožňuje vzdialené pripojenie debuggera, ale RUBY_DEBUG_LAZY zabráni jeho načítaniu, kým nezavoláte debugger v kóde — takže server štartuje rýchlo.

Layout s Tailwind triedami

Po nainštalovaní Tailwindu môžete začať používať utility triedy priamo v šablónach. Základný layout dostane kontajner s automatickými okrajmi:

<body>
  <main class="container mx-auto mt-28 px-5 flex">
    <%= yield %>
  </main>
</body>

A prvý view hneď využíva Tailwind typografiu:

<div>
  <h1 class="font-bold text-4xl">Posts#index</h1>
  <p>Find me in app/views/posts/index.html.erb</p>
</div>

Čo nezabudnúť v .gitignore

Tailwind generuje skompilované CSS do app/assets/builds/. Tieto súbory nechcete v gite — sú build artefakty. Pridajte:

/app/assets/builds/*
!/app/assets/builds/.keep

Prázdny .keep súbor zabezpečí, že Git zachová priečinok, ale ignoruje všetko ostatné.

Zhrnutie

Setup Tailwind CSS 4 v Rails je dnes výrazne jednoduchší ako kedykoľvek predtým. Nepotrebujete Node.js, webpack ani komplikovaný build pipeline. Gem tailwindcss-rails prináša natívnu binárku, Tailwind 4 eliminoval konfiguračné súbory a celý proces sa zmestí do jedného commitu: gem, jeden riadok CSS, Procfile a úprava layoutu. Od nuly po fungujúce Tailwind triedy za pár minút.