[{"data":1,"prerenderedAt":495},["ShallowReactive",2],{"post-\u002Ftailwind-css-to-use-or-not-to-use-that-is-the-question":3},{"page":4,"translation":372,"nav":374,"related":487,"random":488},{"id":5,"title":6,"body":7,"categories":352,"category":354,"date":355,"description":356,"draft":357,"extension":358,"image":359,"kind":354,"lang":360,"meta":361,"navigation":362,"path":363,"readingTime":284,"seo":364,"slug":365,"stem":365,"tags":366,"translationKey":365,"type":353,"updated":370,"__hash__":371},"posts\u002Ftailwind-css-to-use-or-not-to-use-that-is-the-question.md","Tailwind CSS! To use? Or not to use? That is the question.",{"type":8,"value":9,"toc":341},"minimark",[10,46,49,52,55,60,139,141,146,155,158,160,164,167,174,196,249,253,260,318,322,325,327,331,334,337],[11,12,13,21],"blockquote",{},[14,15,16,17],"p",{},"💡 ",[18,19,20],"strong",{},"TL;DR:",[22,23,24,36],"ul",{},[25,26,27,30,31,35],"li",{},[18,28,29],{},"The Problem:"," Tailwind's static compilation (JIT) purges unused classes. If a content editor inputs dynamic Tailwind classes (e.g., ",[32,33,34],"code",{},"p-3",") in a headless CMS, they won't render because they weren't in the static codebase at build time.",[25,37,38,41,42,45],{},[18,39,40],{},"The Verdict:"," Tailwind is perfect for developer-centric teams. For content-heavy blogs with non-technical editors, traditional frameworks (Bootstrap, Bulma) or using Tailwind's ",[32,43,44],{},"@tailwindcss\u002Ftypography"," plugin are better choices.",[14,47,48],{},"Every web developer has had to face the question of which CSS framework to choose. Personally, I love the different perspective that Tailwind CSS brings to CSS frameworks, and its JIT mode that pushes the PurgeCSS concept even further. However, I also know that we must never fall in love with a programming language or framework, as they all serve best in different situations.",[14,50,51],{},"Tailwind CSS is an excellent choice for a project that is actively developed by a team and\u002For if it doesn't require daily and quick releases. It produces a clean and small file without unnecessary CSS statements. But what if it is a blog, or requires a dynamic content creation process? What if you need an additional style that you don't require today? What if it will be used by a team without a developer? Do you think that Tailwind CSS is a suitable solution for such requirements?",[53,54],"hr",{},[56,57,59],"h3",{"id":58},"tailwind-css-vs-traditional-css-frameworks-for-blogscms","Tailwind CSS vs. Traditional CSS Frameworks for Blogs\u002FCMS",[61,62,63,80],"table",{},[64,65,66],"thead",{},[67,68,69,74,77],"tr",{},[70,71,73],"th",{"align":72},"left","Feature",[70,75,76],{"align":72},"Tailwind CSS (Utility-First)",[70,78,79],{"align":72},"Bootstrap \u002F Bulma (Component-Based)",[81,82,83,100,113,126],"tbody",{},[67,84,85,91,97],{},[86,87,88],"td",{"align":72},[18,89,90],{},"Dynamic HTML Support",[86,92,93,94,96],{"align":72},"Poor (requires safelisting or ",[32,95,44],{},").",[86,98,99],{"align":72},"Excellent (classes are pre-compiled and always available).",[67,101,102,107,110],{},[86,103,104],{"align":72},[18,105,106],{},"Customizability",[86,108,109],{"align":72},"Excellent (fully customizable design system).",[86,111,112],{"align":72},"Harder (requires overriding default component styles).",[67,114,115,120,123],{},[86,116,117],{"align":72},[18,118,119],{},"Production CSS Size",[86,121,122],{"align":72},"Very small (only compiles classes that are actively used).",[86,124,125],{"align":72},"Medium\u002FLarge (contains all components regardless of use).",[67,127,128,133,136],{},[86,129,130],{"align":72},[18,131,132],{},"Developer Dependency",[86,134,135],{"align":72},"High (non-devs cannot safely add styles in production).",[86,137,138],{"align":72},"Low (editors can copy\u002Fpaste HTML snippets from docs).",[53,140],{},[142,143,145],"h2",{"id":144},"the-jit-purge-challenge","The JIT Purge Challenge",[14,147,148,149,151,152,154],{},"Let's say you want to add some padding to an element by adding a ",[32,150,34],{}," class. Oops! The class ",[32,153,34],{}," was not added to the CSS file by JIT at build time. When you need to design a blog page really quickly with some additional classes and see that they are not available in the stylesheet, you may notice that Tailwind CSS is not the perfect choice for every situation.",[14,156,157],{},"I encountered this problem with my previous Tailwind CSS based theme a lot. While developing the current one, I had to add many potential classes for the future. This not only increased the size of the stylesheet but still couldn't guarantee that I would have all the required classes in the future. I have the chance to add any missing classes in the future, but a non-developer user cannot add required styles even if they know Tailwind CSS classes, as they might not be available in my static build.",[53,159],{},[142,161,163],{"id":162},"how-to-solve-the-dynamic-content-purge-issue-in-tailwind-css","How to Solve the Dynamic Content Purge Issue in Tailwind CSS",[14,165,166],{},"If you are using Tailwind CSS for a blog or dynamic CMS, here are the three most common ways to solve the problem of missing dynamic classes:",[56,168,170,171,173],{"id":169},"_1-use-the-typography-plugin-tailwindcsstypography","1. Use the Typography Plugin (",[32,172,44],{},")",[14,175,176,177,180,181,184,185,184,188,191,192,195],{},"Instead of injecting utility classes into HTML returned from a database, wrap the content in a div with the ",[32,178,179],{},"prose"," class. This styles all raw ",[32,182,183],{},"\u003Ch1>",", ",[32,186,187],{},"\u003Cp>",[32,189,190],{},"\u003Ca>",", and ",[32,193,194],{},"\u003Cul>"," tags automatically:",[197,198,203],"pre",{"className":199,"code":200,"language":201,"meta":202,"style":202},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"prose lg:prose-xl\">\n  \u003C!-- Dynamic HTML content from CMS goes here -->\n\u003C\u002Fdiv>\n","html","",[32,204,205,232,239],{"__ignoreMap":202},[206,207,210,214,218,222,225,229],"span",{"class":208,"line":209},"line",1,[206,211,213],{"class":212},"sVt8B","\u003C",[206,215,217],{"class":216},"s9eBZ","div",[206,219,221],{"class":220},"sScJk"," class",[206,223,224],{"class":212},"=",[206,226,228],{"class":227},"sZZnC","\"prose lg:prose-xl\"",[206,230,231],{"class":212},">\n",[206,233,235],{"class":208,"line":234},2,[206,236,238],{"class":237},"sJ8bj","  \u003C!-- Dynamic HTML content from CMS goes here -->\n",[206,240,242,245,247],{"class":208,"line":241},3,[206,243,244],{"class":212},"\u003C\u002F",[206,246,217],{"class":216},[206,248,231],{"class":212},[56,250,252],{"id":251},"_2-safelist-important-classes","2. Safelist Important Classes",[14,254,255,256,259],{},"If you know there are specific classes that editors will use frequently (e.g., specific alert box colors or spacing sizes), you can safelist them in your ",[32,257,258],{},"tailwind.config.js"," to prevent them from being purged:",[197,261,265],{"className":262,"code":263,"language":264,"meta":202,"style":202},"language-javascript shiki shiki-themes github-light github-dark","module.exports = {\n  safelist: [\n    'bg-blue-100',\n    'text-blue-800',\n    'p-4',\n    'm-2',\n  ],\n  \u002F\u002F ...\n}\n","javascript",[32,266,267,272,277,282,288,294,300,306,312],{"__ignoreMap":202},[206,268,269],{"class":208,"line":209},[206,270,271],{},"module.exports = {\n",[206,273,274],{"class":208,"line":234},[206,275,276],{},"  safelist: [\n",[206,278,279],{"class":208,"line":241},[206,280,281],{},"    'bg-blue-100',\n",[206,283,285],{"class":208,"line":284},4,[206,286,287],{},"    'text-blue-800',\n",[206,289,291],{"class":208,"line":290},5,[206,292,293],{},"    'p-4',\n",[206,295,297],{"class":208,"line":296},6,[206,298,299],{},"    'm-2',\n",[206,301,303],{"class":208,"line":302},7,[206,304,305],{},"  ],\n",[206,307,309],{"class":208,"line":308},8,[206,310,311],{},"  \u002F\u002F ...\n",[206,313,315],{"class":208,"line":314},9,[206,316,317],{},"}\n",[56,319,321],{"id":320},"_3-implement-a-hybrid-setup","3. Implement a Hybrid Setup",[14,323,324],{},"Use Tailwind CSS for the main layout, static UI components, and theme. Then, use standard vanilla CSS classes or a component-based stylesheet for the rich text editor fields.",[53,326],{},[142,328,330],{"id":329},"conclusion","Conclusion",[14,332,333],{},"Briefly: If you have a single developer or a team of developers focused on the frontend, Tailwind CSS is a perfect choice. If the site needs regular updates without a dedicated developer, using another CSS framework like Bootstrap or Bulma might be a wiser choice.",[14,335,336],{},"What is your opinion? Please share your thoughts in the comments section below.",[338,339,340],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":202,"searchDepth":234,"depth":234,"links":342},[343,344,345,351],{"id":58,"depth":241,"text":59},{"id":144,"depth":234,"text":145},{"id":162,"depth":234,"text":163,"children":346},[347,349,350],{"id":169,"depth":241,"text":348},"1. Use the Typography Plugin (@tailwindcss\u002Ftypography)",{"id":251,"depth":241,"text":252},{"id":320,"depth":241,"text":321},{"id":329,"depth":234,"text":330},[353],"technical",null,"2022-05-12","Tailwind CSS utility classes and JIT purging can cause issues with dynamic CMS content. Let's explore the pros, cons, and solutions.",false,"md","\u002Fimages\u002Fhero\u002Futility-css.avif","en",{},true,"\u002Ftailwind-css-to-use-or-not-to-use-that-is-the-question",{"title":6,"description":356},"tailwind-css-to-use-or-not-to-use-that-is-the-question",[367,368,369],"bootstrap","bulma","tailwind-css","2026-06-21","Vcu3oaNdl51VzzGexo7p8i5mSgZRZSGWLj4ShAJMDJk",{"path":373},"\u002Ftr\u002Ftailwind-css-nerede-kullanilir-tailwind-css-nerede-kullanilmaz",{"prev":375,"next":378,"others":381,"lucky":486,"readingTime":284},{"path":376,"title":377},"\u002Fis-jwt-safe-or-is-it-vulnerable","Is JWT Safe or Is It Vulnerable?",{"path":379,"title":380},"\u002Fwhat-is-hateoas","What is HATEOAS?",[382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,479,480,483],{"path":383,"title":384},"\u002Ffull-stack-project-development","Sample REST API Project",{"path":386,"title":387},"\u002Frest-api-authentication","How to Perform REST API Authentication?",{"path":389,"title":390},"\u002Frest-api-design","REST API Design: Principles and Output Format",{"path":392,"title":393},"\u002Frest-api-documentation-and-testing","How to Document and Test a REST API?",{"path":395,"title":396},"\u002Frest-api-error-handling","How to Perform REST API Error Handling?",{"path":398,"title":399},"\u002Frest-api-security","How to Secure a REST API?",{"path":401,"title":402},"\u002Frest-api-uri-structure","What Should the REST API URI Structure Be?",{"path":404,"title":405},"\u002Ftroubleshooting-cyberpanel-inaccessibility-after-ubuntu-release-upgrade","Troubleshooting CyberPanel Inaccessibility After Ubuntu Release Upgrade",{"path":407,"title":408},"\u002Freset-wordpress-admin-password-using-wp-cli","Reset WordPress Admin Password Using WP-CLI",{"path":410,"title":411},"\u002Fgraphql-vs-rest-api-which-is-the-best-choice-for-headless-wordpress","GraphQL vs REST API: Which is the Best Choice for Headless WordPress?",{"path":413,"title":414},"\u002Fgrow-your-business-in-turkey-with-expert-wordpress-plugin-and-theme-localization-and-support-services","Grow Your Business in Turkey with Expert WordPress Plugin and Theme Localization and Support Services",{"path":416,"title":417},"\u002Fgetting-started-with-devops-understanding-the-principles-and-adopting-the-tools","Getting Started with DevOps: Understanding the Principles and Adopting the Tools",{"path":419,"title":420},"\u002Fphp-graphql-development-advanced-techniques-for-optimizing-your-apis","PHP GraphQL Development: Advanced Techniques for Optimizing Your APIs",{"path":422,"title":423},"\u002Fadvanced-techniques-for-dependency-injection-in-php-tips-code-samples-and-faqs","Advanced Techniques for Dependency Injection in PHP: Tips, Code Samples, and FAQs",{"path":425,"title":426},"\u002Fmaximize-the-potential-of-headless-wordpress-with-graphql","Maximize the Potential of Headless WordPress with GraphQL",{"path":428,"title":429},"\u002Fwriting-clean-modular-and-reusable-code-in-php","Best Practices for Writing Clean, Modular, and Reusable Code in PHP",{"path":431,"title":432},"\u002Fheadless-cmss-an-overview-of-popular-alternatives-to-contentful-and-wordpress","Headless CMSs: An Overview of Popular Alternatives to Contentful and WordPress",{"path":434,"title":435},"\u002Fci-cd-for-php-a-comprehensive-guide","CI\u002FCD for PHP: A Comprehensive Guide",{"path":437,"title":438},"\u002Fintroduction-to-php-namespaces-a-beginners-guide-to-structuring-your-code","Introduction to PHP Namespaces: A Beginner's Guide to Structuring Your Code",{"path":440,"title":441},"\u002Fwhat-is-graylog-a-powerful-tool-for-collecting-indexing-and-analyzing-log-data","What is Graylog? A Powerful Tool for Collecting, Indexing, and Analyzing Log Data",{"path":443,"title":444},"\u002Felevate-your-turkish-audience-experience-with-professional-wordpress-plugin-and-theme-translation","Elevate Your Turkish Audience Experience with Professional WordPress Plugin and Theme Translation",{"path":446,"title":447},"\u002Fhow-to-set-up-a-self-hosted-api-gateway-a-comprehensive-guide","How to Set Up a Self-Hosted API Gateway: A Comprehensive Guide",{"path":449,"title":450},"\u002Fdifference-between-generators-and-iterators-in-php","The Key Differences Between PHP Generators and Iterators",{"path":452,"title":453},"\u002Fphp-and-machine-learning-a-winning-combination-with-php-ml","PHP and Machine Learning: A Winning Combination with PHP-ML",{"path":455,"title":456},"\u002Fphp-generators-a-beginners-guide-to-iteration","PHP Generators: A Beginner's Guide to Iteration",{"path":458,"title":459},"\u002Fmastering-closures-in-javascript-a-beginners-guide","Mastering Closures in JavaScript: A Beginner's Guide",{"path":461,"title":462},"\u002Fthe-top-php-certification-programs-for-developers","The Top PHP Certification Programs for Developers",{"path":464,"title":465},"\u002Fhow-to-revalidate-next-js-isr-cache-on-demand-cache-regeneration","How to Revalidate Next.js ISR Cache? On-Demand Cache Regeneration",{"path":467,"title":468},"\u002Ftips-for-translating-a-wordpress-plugin-wordpress-theme-to-turkish","Tips for Translating a WordPress Plugin \u002F WordPress Theme to Turkish",{"path":470,"title":471},"\u002Fall-about-headless-wordpress","All About Headless WordPress",{"path":473,"title":474},"\u002Finstall-composer-on-ubuntu","How to Install Composer on Ubuntu \u002F Linux",{"path":476,"title":477},"\u002Fwhat-is-an-api-gateway","What is an API Gateway? Should You Use It?",{"path":376,"title":377},{"path":379,"title":380},{"path":481,"title":482},"\u002Fhello-world","Hello World: A New Multilingual Journey",{"path":484,"title":485},"\u002Fwhat-is-ecmascript","What is ECMAScript? What is not?",{"path":428,"title":429},[],[489,491,493],{"path":461,"title":462,"date":490},"2023-01-09",{"path":425,"title":426,"date":492},"2023-01-17",{"path":440,"title":441,"date":494},"2023-01-13",1782141982354]