How to upgrade Tailwind CSS from v3 to v4 in Rails with tailwindcss-rails?

Run the provided upgrade task, but be prepared for challenges: it requires npx for the official upgrade tool and may fail with plugins, necessitating temporary npm setup and manual fixes as per the README's upgrade steps and troubleshooting.

tailwindcss-rails vs cssbundling-rails: which is better for Tailwind?

tailwindcss-rails is ideal for minimal, Rails-native integration without JavaScript toolchain overhead, while cssbundling-rails offers more flexibility with PostCSS and custom builds. Choose based on whether you prioritize simplicity or advanced tooling.

How to use Tailwind plugins with tailwindcss-rails?

Install plugins via npm or Yarn, then add @plugin directives in your app/assets/tailwind/application.css file. The gem supports this, but you must ensure the packages are available, as detailed in the 'Using Tailwind plugins' section.

Why does tailwindcss:watch hang in Docker?

This can occur due to missing tty settings or conflicts with watchman. The README advises enabling tty in docker-compose or using the 'always' argument, and uninstalling watchman if present, to resolve hanging issues.

Can I use PostCSS with tailwindcss-rails and Tailwind v4?

No, for Tailwind v4, PostCSS support is not included in the gem. You need to use cssbundling-rails or manage PostCSS separately, as referenced in the 'Using with PostCSS' section which points to external docs.

How to handle asset pipeline assets in Tailwind CSS with this gem?

Use url() syntax in your CSS or config, such as bg-[url('image.svg')], so Sprockets can fingerprint the paths. The README provides examples in the 'Using asset-pipeline assets' section for seamless integration.

tailwindcss-rails — Tailwind CSS Rails Asset Pipeline

What is tailwindcss-rails?

tailwindcss-rails is a Ruby gem that provides native integration of Tailwind CSS into Ruby on Rails applications. It simplifies the setup and usage of Tailwind CSS by hooking into Rails' asset pipeline, offering installation tasks, build commands, and live-reload capabilities for a smooth development workflow. The gem aims to avoid JavaScript toolchain complexity while maintaining compatibility with Tailwind's ecosystem.

Target Audience

Ruby on Rails developers who want to use Tailwind CSS for styling their applications without managing a separate JavaScript build toolchain. It's particularly suited for teams prioritizing convention-over-configuration and a minimal setup within the Rails asset pipeline.

Value Proposition

Developers choose tailwindcss-rails because it provides a seamless, Rails-native way to use Tailwind CSS, eliminating the need for Node.js or separate build processes in development and production. Its unique selling point is deep integration with Rails tasks (like assets:precompile and test:prepare), built-in live rebuild via a Puma plugin, and support for both Tailwind CSS v3 and v4 with an upgrade assistant.

Overview

tailwindcss-rails is a Ruby gem that simplifies using Tailwind CSS within Ruby on Rails applications. It provides a native integration with Rails' asset pipeline, offering installation tasks, build commands, and live-reload capabilities for a smooth development experience.

Key Features

Asset Pipeline Integration — Automatically hooks into Rails' assets:precompile and test:prepare tasks to generate Tailwind CSS during production builds and test runs.
Live Rebuild Support — Includes a Puma plugin and watch tasks for automatic CSS regeneration during development when files change.
Version Management — Supports both Tailwind CSS v3 and v4, with an upgrade task to help migrate between major versions.
Plugin Compatibility — Allows using Tailwind plugins via npm/Yarn packages and @plugin directives in CSS.
Rails Engine Support — Experimental feature to include Tailwind CSS from Rails engines in the host application's build.

Philosophy

The gem aims to provide a minimal, convention-over-configuration approach to using Tailwind CSS in Rails, avoiding JavaScript toolchain complexity while maintaining compatibility with Tailwind's ecosystem.

tailwindcss-rails

What is tailwindcss-rails?

Overview

Key Features

Philosophy

Related Projects

Found a gem we're missing?

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions