Bolt ui

Tailwind CSS Classes Not Applying - Styles Ignored

Tailwind CSS classes aren't being applied to elements. You add classes like 'bg-blue-500' but the element stays unstyled.

Sometimes works in some components but not others. Manual styles work fine.

Error Messages You Might See

Tailwind CSS not found Styles not applying Class text-blue-500 not recognized PostCSS plugin error
Tailwind CSS not foundStyles not applyingClass text-blue-500 not recognizedPostCSS plugin error

Common Causes

  1. Tailwind not configured in tailwind.config.js or config missing CSS input path
  2. CSS file not imported in main layout or root component
  3. Dynamic class names (string templates) not scanned by Tailwind content config
  4. CSS Autoprefixer or PostCSS not configured properly
  5. Purged classes - content config doesn't include template files with classes

How to Fix It

Verify tailwind.config.js content includes all template paths: content: ['./src/**/*.{js,jsx,ts,tsx}']

Ensure CSS imported in root: import 'tailwindcss/tailwind.css'

Avoid dynamic class names: const className = `text-${color}` won't work. Use full class names or Tailwind merge utility

Check PostCSS config has Tailwind plugin

Rebuild after config changes: npm run dev

Real developers can help you.

Omar Faruk Omar Faruk As a Product Engineer at Klasio, I contributed to end-to-end product development, focusing on scalability, performance, and user experience. My work spanned building and refining core features, developing dynamic website templates, integrating secure and reliable payment gateways, and optimizing the overall system architecture. I played a key role in creating a scalable and maintainable platform to support educators and learners globally. I'm enthusiastic about embracing new challenges and making meaningful contributions. Simon A. Simon A. I'm a backend developer building APIs, emulators, and interactive game systems. Professionally, I've developed Java/Spring reporting solutions, managed relational and NoSQL databases, and implemented CI/CD workflows. Krishna Sai Kuncha Krishna Sai Kuncha Experienced Professional Full stack Developer with 8+ years of experience across react, python, js, ts, golang and react-native. Developed inhouse websearch tooling for AI before websearch was solved : ) Matthew Butler Matthew Butler Systems Development Engineer @ Amazon Web Services Alvin Voo Alvin Voo I’ve watched the tech landscape evolve over the last decade—from the structured days of Java Server Pages to the current "wild west" of Agentic-driven development. While AI can "vibe" a frontend into existence, I specialize in the architecture that keeps it from collapsing. My expertise lies in the critical backend infrastructure: the parts that must be fast, secure, and scalable. I thrive on high-pressure environments, such as when I had only three weeks to architect and launch an Ethereum redemption system with minimal prior crypto knowledge, turning it into a major revenue stream. What I bring to your project: Forensic Debugging: I don't just "patch" bugs; I use tools like Datadog and Explain Analyzers to map out bottlenecks and resolve root causes—like significantly reducing memory usage by optimizing complex DB joins. Full-Stack Context: Deep experience in Node.js and React, ensuring backends play perfectly with mobile and web teams. Sanity in the Age of AI: I bridge the gap between "best practices" and modern speed, ensuring your project isn't just built fast, but built to last. Matthew Jordan Matthew Jordan I've been working at a large software company named Kainos for 2 years, and mainly specialise in Platform Engineering. I regularly enjoy working on software products outside of work, and I'm a huge fan of game development using Unity. I personally enjoy Python & C# in my spare time, but I also specialise in multiple different platform-related technologies from my day job. Luca Liberati Luca Liberati I work on monoliths and microservices, backends and frontends, manage K8s clusters and love to design apps architecture Matt Butler Matt Butler Software Engineer @ AWS Tejas Chokhawala Tejas Chokhawala Full-stack engineer with 5 years experience building production web apps using React, Next.js and TypeScript. Focused on performance, clean architecture and shipping fast. Experienced with Supabase/Postgres backends, Stripe billing, and building AI-assisted developer tools. hanson1014 hanson1014 Full-stack developer experienced in fixing and deploying AI-generated apps from Lovable, Bolt.new, Cursor, and Replit. I specialize in debugging Supabase integration issues (auth flows, RLS policies, database connections), fixing broken deployments, resolving routing/blank screen problems, and cleaning up messy React/Vite codebases. I also build production apps with the Claude API and have shipped a Mac desktop dev tool (Nexterm from scratch. Based in Hong Kong, fast turnaround.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help

Frequently Asked Questions

Why don't dynamic Tailwind classes work?

Tailwind uses static analysis. text-${color} is a template and Tailwind can't scan it. Use full class names or mapping

How do I use arbitrary values instead?

Use bracket syntax: bg-[#1234567] for custom colors, or configure in tailwind.config.js

Should I use CSS modules with Tailwind?

Tailwind works best without CSS modules. Use utility-first directly in JSX

Related Bolt Issues

Can't fix it yourself?
Real developers can help.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help