Skip to content

Migrate TailwindCSS config to v4 native @source directives - #289

Merged
rsmoke merged 2 commits into
mainfrom
staging
Jul 7, 2026
Merged

Migrate TailwindCSS config to v4 native @source directives#289
rsmoke merged 2 commits into
mainfrom
staging

Conversation

@rsmoke

@rsmoke rsmoke commented Jul 7, 2026

Copy link
Copy Markdown
Member

This pull request updates how Tailwind CSS sources content for class scanning and configuration. The main change is moving the content source configuration from tailwind.config.js into the application.css file, streamlining the setup and potentially making it easier to manage Tailwind's purging behavior directly within the stylesheet.

Tailwind CSS configuration updates:

  • Removed the content, plugins, and safelist configuration from config/tailwind.config.js, eliminating the need for explicit file path listings in the JS config.
  • Added @source directives to app/assets/tailwind/application.css to specify which files Tailwind should scan for class usage, including helpers, components, and initializers.# Pull Request

Description

Related Issues

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules
  • I have checked my code and corrected any misspellings

Comment on lines +3 to +5
@source '../../../app/helpers/**/*.rb';
@source '../../../app/components/**/*.{erb,haml,html,slim,rb}';
@source '../../../config/initializers/**/*.rb';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Relying on implicit TailwindCSS content detection may cause CSS classes from views and JavaScript to be purged, breaking application styles.
Severity: MEDIUM

Suggested Fix

To ensure all necessary CSS classes are retained, explicitly re-add the @source directives for view and JavaScript files in app/assets/tailwind/application.css. For example: @source "app/views/**/*.erb"; and @source "app/javascript/**/*.js";.

Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: app/assets/tailwind/application.css#L3-L5

Potential issue: The removal of explicit `@source` directives for `app/views/**/*.erb`
and `app/javascript/**/*.js` relies on the automatic content detection of TailwindCSS
v4. While this is designed to work with Rails, there's a risk that the
`tailwindcss-ruby` integration with the asset pipeline may not discover all content
paths correctly. If auto-detection fails, Tailwind classes used in ERB templates or
dynamically added via JavaScript (e.g., in
`app/javascript/controllers/email_autocomplete_controller.js`) will be purged during the
production build, leading to widespread styling breakages across the application.

Did we get this right? 👍 / 👎 to inform future reviews.

@rsmoke
rsmoke merged commit 624f155 into main Jul 7, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant