Skip to content

Tailwind utility classes empty in dev mode #1234

@parteeksingh24

Description

@parteeksingh24

Dev mode renders pages without Tailwind utility styles. Theme variables and base styles load, but @layer utilities is empty -- no flex, bg-*, p-4, etc. Reproduced on apps/docs but likely affects any project using the Agentuity dev server with Tailwind v4.

Issue

# Vite serves index.css with an empty utilities layer:
@layer utilities;

# bun run build works fine -- full styling in production output.
# Only dev mode is affected.

Environment: macOS (Apple Silicon), tailwindcss@^4.1.18, @tailwindcss/vite@^4.1.18

Potential Cause

The tailwindSourcePlugin injects source(none) into @import "tailwindcss" unconditionally, disabling the oxide filesystem scanner. This was added for containerized environments (tailwindlabs/tailwindcss#19661), but on native macOS the oxide scanner works fine. With it disabled, @tailwindcss/vite is supposed to detect classes via Vite's module graph, but that detection appears to not work in dev mode.

Potential Fixes

  1. Only apply source(none) in container environments (check for /.dockerenv, etc.) so native dev isn't affected?
  2. Add explicit @source directives alongside source(none) so Tailwind knows where to scan?
  3. Check if a newer @tailwindcss/vite version fixes dev mode detection with source(none)?

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions