{"slug": "real-world-tailwind-css-controlling-the-special-cases-part-2-2", "title": "Real World Tailwind CSS: Controlling the Special Cases (Part 2/2)", "summary": "A developer discusses strategies for managing special cases in Tailwind CSS, including avoiding prop explosion by isolating one-off designs in separate pages and creating campaign-specific components as a middle ground. The goal is to keep shared components focused and maintainable.", "body_md": "So in the last article, we have discussed the best practices for using Tailwind CSS4 in the real world - which is,\n\nIn this way we \"hide\" the long utility class strings from rest of the codebase.\n\nWhat happens when marketing launches a new campaign and needs a gradient CTA button that deviates from the core design system??\n\nThe obvious choice might be to do something like this:\n\n``` js\nconst variants = {\n  primary: \"...\",\n  secondary: \"...\",\n  // The new marketing variant\n  \"ai-campaign\": \"bg-gradient-to-r from-emerald-500 to-teal-500 animate-pulse text-lg px-8 py-4\" \n};\n```\n\nThis looks clean today. But in a few years, it might grow to\n\n```\n<Button\n  variant=\"primary\"\n  isMarketing\n  isAnimated\n  hasGlowEffect\n  showConfetti\n  campaignTheme=\"black-friday-2024\"\n  seasonalBadge=\"sale\"\n  size=\"xl\"\n/>\n```\n\nNow it's bloated again... this is called **prop explosion**.\n\nSometimes a design is so specific that it's hard to imagine anyone using it again. So, just make the page live in a separate directory and use utility classes directory\n\n```\n////  Inside @/app/marketing/campaign/page.tsx ////\n...\nexport default function CampaignPage() {\n  return (\n    <div>\n      <h1>The Next Generation of AI</h1>\n\n      {/* Custom, one-off visual classes are localized entirely to this page */}\n      <Button\n        className={cn(\"bg-indigo-600 text-white px-4 py-2\", className)} >\n        Get Early Access\n      </Button>\n    </div>\n  );\n}\n```\n\nOnce the campaign ends, just delete the page. The component is left untouched.\n\nIf there are only a handful of visual styles and they genuinely represent something the business uses repeatedly, I'd probably just add another variant.\n\n```\n<Button variant=\"primary\" />\n<Button variant=\"secondary\" />\n<Button variant=\"cta\" />\n<Button variant=\"voucher\" />\n```\n\nThe props felt easy enough to understand, and it keeps the page code nice and clean. In a smaller codebase, maintaining a few extra variants would not be a big deal.\n\nThere's also a middle ground. If I find myself copying the same styling around a campaign or a particular section of the application, I'd probably start wondering whether it's worth creating something like a .\n\n```\nfunction CampaignButton(props) {\n  return (\n    <Button\n      className={cn(\"bg-gradient-to-r from-emerald-500 to-teal-500 animate-pulse\", \n      className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CampaignButton({ className, ...props }) {\n  return (\n    <Button\n      className={cn(\n        \"bg-gradient-to-r ...\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n// Base component\n<Button>\n  Testimonials\n</Button>\n\n// Campaign-specific component\n<CampaignButton>\n  Get Early Access\n</CampaignButton>\n```\n\nThat way the shared Button stays focused on being a button, while the campaign gets its own reusable abstraction. It feels like a reasonable compromise when you're not quite ready to promote something into the design system, but you don't want duplicated styling everywhere either.\n\nThe goal is:\n\nKeep shared components focused, understandable, and maintainable.\n\nDo you agree with the tradeoffs? What are your tips for writing even tidier and more maintainable components? Please share your experience ~ :)", "url": "https://wpnews.pro/news/real-world-tailwind-css-controlling-the-special-cases-part-2-2", "canonical_source": "https://dev.to/cathylai/real-world-tailwind-css-controlling-the-special-cases-part-22-mdd", "published_at": "2026-06-21 11:56:25+00:00", "updated_at": "2026-06-21 12:06:45.014747+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Tailwind CSS"], "alternates": {"html": "https://wpnews.pro/news/real-world-tailwind-css-controlling-the-special-cases-part-2-2", "markdown": "https://wpnews.pro/news/real-world-tailwind-css-controlling-the-special-cases-part-2-2.md", "text": "https://wpnews.pro/news/real-world-tailwind-css-controlling-the-special-cases-part-2-2.txt", "jsonld": "https://wpnews.pro/news/real-world-tailwind-css-controlling-the-special-cases-part-2-2.jsonld"}}