{"id":14049,"date":"2023-11-30T15:30:24","date_gmt":"2023-11-30T15:30:24","guid":{"rendered":"http:\/\/TheNextWeb=1401972"},"modified":"2023-11-30T15:30:24","modified_gmt":"2023-11-30T15:30:24","slug":"is-tailwind-css-worth-trying-in-2024","status":"publish","type":"post","link":"https:\/\/www.londonchiropracter.com\/?p=14049","title":{"rendered":"Is Tailwind CSS Worth Trying in 2024?"},"content":{"rendered":"\n<p><em>This article was originally published on .cult by <a href=\"https:\/\/cult.honeypot.io\/contributors\/luis-minvielle\/\" target=\"_blank\" rel=\"nofollow noopener\">Luis Minvielle<\/a>. .cult is a Berlin-based community platform for developers. We write about all things <a href=\"https:\/\/thenextweb.com\/topic\/career\" target=\"_blank\" rel=\"noopener\">career<\/a>-related, make original documentaries, and share heaps of other untold developer stories from around the world.<\/em><\/p>\n<p>Developers who finally land a job doing what they love \u2014 <a href=\"https:\/\/thenextweb.com\/topic\/coding\" target=\"_blank\" rel=\"noopener\">coding<\/a> \u2014 frequently face a brain-teaser: Coding for a living is fantastic, indeed, but is it as endearing when you\u2019re stuck doing the same task over and over again? Because, we get it: writing CSS is allegedly fun, but try doing it on repeat.<\/p>\n<p>Fortunately, web developers constantly drop tools and frameworks that make day-to-day tasks feel like less of a headache. One toolkit that has gained significant attention recently is <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Tailwind CSS<\/a>.<\/p>\n<p>Its approach to building user interfaces promotes a utility-first CSS framework that allows you to easily style your websites without the need to write custom CSS code. This <a href=\"https:\/\/github.com\/tailwindlabs\/tailwindcss\/releases\" target=\"_blank\" rel=\"nofollow noopener\">open-source<\/a> GitHub favourite provides a set of pre-built utility classes that you can apply directly in your HTML code to achieve different styles and layouts within any design. Sounds promising if you want to stop asking yourself if you loved to code in the first place.<\/p>\n<div class=\"inarticle-wrapper latest channel-cta hs-embed-tnw\">\n<div id=\"hs-embed-tnw\" class=\"channel-cta-wrapper\" readability=\"8.5\">\n<div class=\"channel-cta-img\"><img decoding=\"async\" class=\"js-lazy\" src=\"https:\/\/s3.amazonaws.com\/events.tnw\/hardfork-2018\/uploads\/visuals\/tnw-newsletter.png\"><\/div>\n<p><noscript><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/events.tnw\/hardfork-2018\/uploads\/visuals\/tnw-newsletter.png\"><\/noscript><\/p>\n<div class=\"channel-cta-input\" readability=\"12\">\n<p class=\"channel-cta-title\">The &lt;3 of EU tech<\/p>\n<p class=\"channel-cta-tagline\">The latest rumblings from the EU tech scene, a story from our wise ol&#8217; founder Boris, and some questionable AI art. It&#8217;s free, every week, in your inbox. Sign up now!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>But, is it worth trying in 2024? Let\u2019s dive into the details and explore its features, benefits, downsides, and how it\u2019s still valid for <a href=\"https:\/\/thenextweb.com\/topic\/developer\" target=\"_blank\" rel=\"noopener\">developers<\/a> today.<\/p>\n<h2>What is Tailwind CSS?<\/h2>\n<p>Tailwind CSS is a utility-first CSS framework that provides a comprehensive set of pre-built <a href=\"https:\/\/www.techtarget.com\/whatis\/definition\/class#:~:text=In%20object%2Doriented%20programming%2C%20a,ideas%20of%20object%2Doriented%20programming.\" target=\"_blank\" rel=\"nofollow noopener\">classes<\/a> to speed up the development process. Unlike traditional CSS frameworks that come with pre-designed components and styles, Tailwind CSS focuses on supplying small, single-purpose utility classes that can be combined to create custom styles, providing more flexibility and control over the appearance of a website. Web designers online have called it a lean, utility-based CSS framework intended for speedy UI development.<\/p>\n<p>The team behind Tailwind CSS is still adding features, and recently launched its Just-In-Time (<a href=\"https:\/\/v2.tailwindcss.com\/docs\/just-in-time-mode\" target=\"_blank\" rel=\"nofollow noopener\">JIT<\/a>) compiler to get lightning-quick build times. This means the toolkit is a time saver on two fronts: it\u2019ll save your time and the person-behind-the screen\u2019s time (without testing their patience).<\/p>\n<p>Developers can compose these classes to create components and layouts. For example, you can define text colour, background colour, padding, margin, and more by simply <a href=\"https:\/\/cult.honeypot.io\/reads\/how-to-link-css-to-html\/\" target=\"_blank\" rel=\"nofollow noopener\">adding classes to your HTML elements<\/a>. This modular approach makes it easy to tweak and scale your designs without writing custom and repetitive CSS (contrary to <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Bootstrap<\/a>, which aims to provide a familiar and consistent look and feel across different projects).<\/p>\n<h2>Who\u2019s using Tailwind CSS in 2023? What is it great for?<\/h2>\n<p>Even if certain YouTube channels have recently dunked on this framework for being too contrived, Tailwind CSS is anything but a fad. In 2023, these organisations use Tailwind CSS for their sites:<\/p>\n<ul>\n<li>Der Spiegel<\/li>\n<li>OpenAI and ChatGPT (hope they secured royalties here)<\/li>\n<li>Shopify<\/li>\n<li>Loom<\/li>\n<li>The Verge<\/li>\n<li>MrBeast\u2019s Feastables microsite<\/li>\n<li>Microsoft .NET\u2019s marketing site (kind of amusing)<\/li>\n<\/ul>\n<p>Moreover, according to industry insights, more than <a href=\"https:\/\/stackshare.io\/tailwind-css#:~:text=435%20companies%20reportedly%20use%20Tailwind,Superchat%2C%20tarfin%2C%20and%20Foretag\" target=\"_blank\" rel=\"nofollow noopener\">400 companies<\/a>, some of them even more tech-oriented than the list above, are using Tailwind CSS. The adoption by a number of different companies suggests two things: First, the framework can cater to diverse needs, from media sites to e-commerce platforms. Second, its adoption by such industry heavyweights indicates a level of precision that might not be beginner-friendly. From a <a href=\"https:\/\/cult.honeypot.io\/reads\/fullstack-developer-responsibilities-and-trends\/\" target=\"_blank\" rel=\"nofollow noopener\">frontend<\/a> perspective, the fact that OpenAI is using it underscores how versatile and respected Tailwind CSS is in 2023, but also hints at a steeper learning curve.<\/p>\n<p>The fact that this toolkit is meant for mid-level developers is already evident. However, due to its diverse acceptance, it can be challenging to pinpoint the specific application of Tailwind. Is it specifically good for e-commerce? Or for marketing sites? It\u2019s not obvious, since it seems like a versatile instrument. That\u2019s a good thing.<\/p>\n<h2>Integrations<\/h2>\n<p>Tailwind CSS integrates seamlessly with various frontend frameworks and tools. It pairs well with popular <a href=\"https:\/\/cult.honeypot.io\/reads\/astro-the-new-javascript-framework\/\" target=\"_blank\" rel=\"nofollow noopener\">JavaScript frameworks<\/a> like <a href=\"https:\/\/cult.honeypot.io\/reads\/react-js-the-documentary-how-it-all-began\/\" target=\"_blank\" rel=\"nofollow noopener\">React<\/a>, <a href=\"https:\/\/cult.honeypot.io\/originals\/vue-js-the-documentary\/\" target=\"_blank\" rel=\"nofollow noopener\">Vue.js<\/a>, and Angular. Additionally, Tailwind CSS can be easily integrated into build tools like Webpack and PostCSS, ensuring a sleek development workflow and leaner sites. The following React code snippet should render a blue button with white text when included into a React app that, well, also has a Tailwind CSS set up.<\/p>\n<p><figure class=\"post-image post-mediaBleed aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1401974 size-full js-lazy\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM.png\" alt=\"Tailwind code\" width=\"1280\" height=\"446\" sizes=\"(max-width: 1280px) 100vw, 1280px\" data-srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM.png 1280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM-280x98.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM-270x94.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM-540x188.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM-796x277.png 796w\"><noscript><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1401974 size-full\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM.png\" alt=\"Tailwind code\" width=\"1280\" height=\"446\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM.png 1280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM-280x98.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM-270x94.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM-540x188.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.19.40-PM-796x277.png 796w\"><\/noscript><\/figure>\n<\/p>\n<h2>Advantages of Tailwind CSS in 2024<\/h2>\n<p>Tailwind CSS offers several benefits that make it a compelling choice for developers in 2024:<\/p>\n<ul>\n<li>Responsive design: Firstly, it provides a highly customisable approach through the tailwind.config.js file, allowing developers to define colours, breakpoints, fonts, and much more.<\/li>\n<li>Consistency: With its unified design system, Tailwind ensures the overall frontend consistency across all pages and maintains a cohesive design.<\/li>\n<li>Speedy development: One of the standout advantages of Tailwind CSS is its ability to accelerate development. By leveraging pre-defined utility classes, developers can build UI components quickly without the need for custom CSS (we\u2019d love to know how long it took you to build a site with Tailwind).<\/li>\n<li>The Tailwind UI repo: Tailwind UI is a collection of professionally designed, pre-built, and fully responsive HTML snippets that can be used in Tailwind CSS projects, It\u2019s run by the same team behind Tailwind CSS and provides a wide range of UI components, templates, and examples that developers can use as a starting point for their web development projects. Tailwind UI aims to help developers build fine-looking and functional user interfaces without writing repetitive code.<\/li>\n<li>The JIT mode: The JIT mode is a compiler that generates CSS styles on-demand as you author your templates, rather than generating all the classes in advance at initial build-time. In JIT mode, Tailwind analyses your HTML templates and generates only the necessary CSS styles based on the classes used in your markup \u2014 providing faster build times.<\/li>\n<\/ul>\n<h2>Downsides of Tailwind CSS in 2023<\/h2>\n<p>While Tailwind CSS brings numerous advantages to the table, it has received some criticism as well:<\/p>\n<ul>\n<li>Learning curve: For developers new to Tailwind CSS, there can be a long learning curve as they become accustomed to the utility class-based approach. This might slow down initial development until familiarity is achieved.<\/li>\n<li>\u2018Limited design creativity\u2019: While Tailwind CSS offers flexibility, especially compared to other popular frameworks like Bootstrap, some designers and developers may find it constraining for highly creative or unconventional designs. I\u2019ll admit that this point is a bit nuanced. While Tailwind is utility-first, it doesn\u2019t really limit design creativity. It\u2019s flexible enough to let developers build almost anything. However, the challenge might be thinking within utility class constraints. It\u2019s more about adjusting to a new mindset than an actual limitation in creative design.<\/li>\n<li>Large file sizes: Tailwind CSS can generate large CSS files, which might impact page load times. Careful optimisation and tree shaking are both necessary to mitigate this issue. Still, its integration with PurgeCSS can help developers obtain smaller and quicker files.<\/li>\n<\/ul>\n<p>It\u2019s worth noting that with the advent of the JIT mode, the development builds are much leaner because only the used classes are generated on-the-fly.<\/p>\n<p>Still, many of these benefits and downsides are just relative. That\u2019s why we suggest comparing Tailwind CSS against other projects, such as the world-famous Bootstrap.<\/p>\n<h2>Tailwind CSS vs. Bootstrap: How does it hold up?<\/h2>\n<p>When developers consider a new styling tool, Bootstrap typically serves as the gold standard for comparison. A component-based framework, Bootstrap ships with ready-to-use components like modals, buttons, and navbars. It\u2019s the \u2018grab-and-go\u2019 of the CSS world, prioritising speed and a unified look. In 2023, you can tell when a site is using Bootstrap\u2019s glossy icons right away.<\/p>\n<p>Tailwind, on the other hand, adopts a utility-first approach. Instead of pre-designed components, you get atomic utility classes. The idea? Craft your UI piece by piece, granting designers and developers more flexibility. So, if in Bootstrap, a button might be determined as <span>&lt;button class=\u201dbtn btn-primary\u201d&gt;Bootstrap&lt;\/button&gt;<\/span> in Tailwind, it\u2019ll be:<\/p>\n<p><figure class=\"post-image post-mediaBleed aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1402001 aligncenter js-lazy\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM.png\" alt=\"Tailwind code\" width=\"1226\" height=\"226\" sizes=\"(max-width: 1226px) 100vw, 1226px\" data-srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM.png 1226w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM-280x52.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM-270x50.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM-540x100.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM-796x147.png 796w\"><noscript><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1402001 aligncenter\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM.png\" alt=\"Tailwind code\" width=\"1226\" height=\"226\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM.png 1226w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM-280x52.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM-270x50.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM-540x100.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-3.42.37-PM-796x147.png 796w\"><\/noscript><\/figure>\n<\/p>\n<p>This brings the matter of customisation. While Bootstrap is customiszable using SCSS variables, deviating significantly from its default look demands overriding styles, sometimes leading to \u2018Bootstrap fatigue\u2019 where every site seems eerily similar.<\/p>\n<p>Customisation, on the other hand, is Tailwind\u2019s playground. The tailwind.config.js file is your canvas, allowing bespoke designs. Do you want a specific shade of blue or a unique breakpoint? Devs can define it very easily. So head to your <a href=\"https:\/\/coolors.co\/\" target=\"_blank\" rel=\"nofollow noopener\">palette-picking<\/a> sites and get on with it.<\/p>\n<p><figure class=\"post-image post-mediaBleed aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1402002 aligncenter js-lazy\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM.png\" alt=\"Tailwind code\" width=\"1220\" height=\"344\" sizes=\"(max-width: 1220px) 100vw, 1220px\" data-srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM.png 1220w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM-280x79.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM-270x76.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM-540x152.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM-796x224.png 796w\"><noscript><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1402002 aligncenter\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM.png\" alt=\"Tailwind code\" width=\"1220\" height=\"344\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM.png 1220w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM-280x79.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM-270x76.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM-540x152.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-5.49.12-PM-796x224.png 796w\"><\/noscript><\/figure>\n<\/p>\n<p>Bootstrap, with its well-documented, component-based nature, often serves as the first port of call for budding CSS enthusiasts. Its off-the-shelf components, like responsive navbars, mean rapid development. However, this convenience sometimes contributes to project bloat, affecting performance.<\/p>\n<p>In contrast, Tailwind CSS is akin to crafting with precision tools. Instead of pre-styled components, you\u2019re presented with granular utility classes. For example, with Bootstrap, you might use a single class for a button, whereas in Tailwind, you would meticulously define its appearance with a combination of utilities, like text colour, background, and padding. It\u2019s a system that might seem overwhelming to novices, but offers seasoned frontend developers an unparalleled level of control. Furthermore, Tailwind\u2019s integration with <a href=\"https:\/\/purgecss.com\/\" target=\"_blank\" rel=\"nofollow noopener\">PurgeCSS<\/a> helps remove unused CSS for an economical, prompt build.<\/p>\n<p>Essentially, while Bootstrap is geared toward quick, uniform designs, Tailwind is great for seasoned developers seeking accuracy in their designs. Both are legitimate choices in 2023.<\/p>\n<h2>A real use case for Tailwind CSS in 2023<\/h2>\n<p>Thanks to the testimony of a <a href=\"https:\/\/ca.linkedin.com\/in\/fbrill?original_referer=https%3A%2F%2Fwww.bing.com%2F\" target=\"_blank\" rel=\"nofollow noopener\">frontend expert<\/a>, we can go through a use case where Tailwind CSS helped the most relatable of online businesses: a SaaS. While building <a href=\"https:\/\/blog.logrocket.com\/applying-dynamic-styles-tailwind-css\/\" target=\"_blank\" rel=\"nofollow noopener\">NodCards<\/a>, a digital business card platform, the developer came across a challenge: allowing users to dynamically select any primary design colour for their cards. This choice had to be incorporated without altering the website\u2019s markup or stylesheet.<\/p>\n<p>Tailwind CSS, in combination with its JIT compiler (head to Tailwind\u2019s official site to learn how to <a href=\"https:\/\/v2.tailwindcss.com\/docs\/just-in-time-mode\" target=\"_blank\" rel=\"nofollow noopener\">enable it<\/a>), presented the dev with a workaround. However, the dynamic colour application wasn\u2019t straightforward. Instead of relying solely on Tailwind\u2019s utility classes, the developer utilised the power of CSS variables and helper functions.<\/p>\n<p><figure class=\"post-image post-mediaBleed aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1402008 aligncenter js-lazy\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM.png\" alt=\"Tailwind code\" width=\"800\" height=\"212\" sizes=\"(max-width: 800px) 100vw, 800px\" data-srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM.png 800w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM-280x74.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM-270x72.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM-540x143.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM-796x211.png 796w\"><noscript><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1402008 aligncenter\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM.png\" alt=\"Tailwind code\" width=\"800\" height=\"212\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM.png 800w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM-280x74.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM-270x72.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM-540x143.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.04.05-PM-796x211.png 796w\"><\/noscript><\/figure>\n<\/p>\n<p>This helper function converts a HEX colour to RGB, which aids in creating CSS variables for the dynamic primary colour. Once converted, these RGB values are integrated with Tailwind CSS to produce varied shades, ensuring flexibility with opacity layering. For instance, the text colour for a user\u2019s name can be dynamically set:<\/p>\n<p><figure class=\"post-image post-mediaBleed aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1402005 aligncenter js-lazy\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM.png\" alt=\"Tailwind code\" width=\"1218\" height=\"114\" sizes=\"(max-width: 1218px) 100vw, 1218px\" data-srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM.png 1218w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM-280x26.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM-270x25.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM-540x51.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM-796x75.png 796w\"><noscript><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1402005 aligncenter\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM.png\" alt=\"Tailwind code\" width=\"1218\" height=\"114\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM.png 1218w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM-280x26.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM-270x25.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM-540x51.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-6.59.38-PM-796x75.png 796w\"><\/noscript><\/figure>\n<p>Similarly, buttons can be styled to use the primary colour with variable opacities and even adjust for accessibility concerns on hover:<\/p>\n<p><figure class=\"post-image post-mediaBleed aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1402006 aligncenter js-lazy\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM.png\" alt=\"Tailwind code\" width=\"800\" height=\"177\" sizes=\"(max-width: 800px) 100vw, 800px\" data-srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM.png 800w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM-280x62.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM-270x60.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM-540x119.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM-796x176.png 796w\"><noscript><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1402006 aligncenter\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM.png\" alt=\"Tailwind code\" width=\"800\" height=\"177\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM.png 800w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM-280x62.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM-270x60.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM-540x119.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2023\/11\/Screenshot-2023-11-29-at-7.00.41-PM-796x176.png 796w\"><\/noscript><\/figure>\n<\/p>\n<p>With Tailwind CSS, NodCards managed to offer users the flexibility to personalise their cards\u2019 design dynamically, while ensuring aesthetics, accessibility, and a nimble site.<\/p>\n<h2>So, in conclusion<\/h2>\n<p>As seen through the lens of high-profile sites and real-world use cases, it\u2019s clear that Tailwind CSS is more than just a passing trend. If you\u2019re on the fence about adopting it, remember that aptitude often begins with experimentation. So, dive in, get your hands dirty with Tailwind, and let your creations speak for themselves.<\/p>\n<p> <a href=\"https:\/\/thenextweb.com\/news\/is-tailwind-css-worth-trying-in-2024\">Source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article was originally published on .cult by Luis Minvielle. .cult is a Berlin-based community platform for developers. We write about all things career-related, make original documentaries, and share heaps of other&#8230;<\/p>\n","protected":false},"author":1,"featured_media":14050,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.londonchiropracter.com\/index.php?rest_route=\/wp\/v2\/posts\/14049"}],"collection":[{"href":"https:\/\/www.londonchiropracter.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.londonchiropracter.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.londonchiropracter.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.londonchiropracter.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14049"}],"version-history":[{"count":0,"href":"https:\/\/www.londonchiropracter.com\/index.php?rest_route=\/wp\/v2\/posts\/14049\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.londonchiropracter.com\/index.php?rest_route=\/wp\/v2\/media\/14050"}],"wp:attachment":[{"href":"https:\/\/www.londonchiropracter.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.londonchiropracter.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=14049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.londonchiropracter.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=14049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}