A minimal setup for Tailwind CSS 4 in Jekyll using the jekyll-tailwind gem

The RubyLA blog offers insights, tutorials, and community updates for Ruby developers in Los Angeles and beyond. Developers can explore Ruby language features, web development frameworks, and best practices for building Ruby applications. Additionally, the blog covers Ruby meetups, events, and job opportunities in the Los Angeles area, fostering collaboration and networking within the local Ruby community.

RUBYLAND

Tailwind CSS 4 replaces JavaScript configuration with CSS-based setup using @theme directives. The jekyll-tailwind gem integrates Tailwind 4 into Jekyll sites without requiring a separate build pipeline or PostCSS configuration. Setup involves adding the gem to your Gemfile, configuring _config.yml to point at your CSS file, defining custom theme values in a CSS file using @theme blocks, and optionally installing Tailwind plugins via npm. The gem hooks into Jekyll's build process, automatically scanning templates for classes and generating optimized CSS with hot reload support.

Simple Tailwind CSS 4 Setup for Jekyll