![\"Tailwind](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/05\/tailwindcss-1633184775-1200x600.webp\")
<\/figure>\n\n\n\nSome Useful Properties Provided By Tailwind<\/h2>\n\n\n\n
Tailwind CSS’s composability is its superpower, enabling developers to create intricate designs using a combination of utility classes. But did you know you can take it even further?<\/p>\n\n\n\n
Utility Functions:<\/strong> Dive into the world of utility functions, which enable dynamic class generation based on user-defined parameters. <\/p>\n\n\n\n From generating color palettes to creating responsive layouts on the fly, utility functions add a new dimension to Tailwind’s versatility.<\/p>\n\n\n\n Force Color Property already presents simple CSS and Tailwind also added its feature as it’s one of its utility classes.<\/p>\n\n\n\n In Normal CSS, The User agents, such as web browsers, offer an accessibility feature known as ‘Forced Colors’ Mode.<\/p>\n\n\n\n This mode constrains the color palette to a limited set of colors. Which are determined by both the user’s preferences and the user agent’s default settings.<\/p>\n\n\n\n The purpose of this mode is to override the colors specified by the web author for certain properties. Ensuring a high-contrast and easily readable interface for users with visual impairments.<\/p>\n\n\n\n When Forced Colors Mode is active, the CSS function becomes particularly useful. It allows web authors to access the user agent’s color palette. <\/p>\n\n\n\n And apply these system-defined colors throughout the webpage.<\/p>\n\n\n\n By using it, developers can ensure that their page’s design harmoniously integrates with the restricted color scheme, maintaining both visual consistency and accessibility. <\/p>\n\n\n\n Now anyone can use this in Tailwind as well<\/p>\n\n\n\n And, For forced color adjustment tailwind as well provide Tailwind also added two new utilities to enhance your control over designs in Forced Colors Mode: forced-color-adjust-auto and forced-color-adjust-none. <\/p>\n\n\n\n While these utilities offer greater design flexibility, they should be used judiciously. It’s generally best to allow the user’s color preferences to take precedence for accessibility reasons. <\/p>\n\n\n\n However, there are cases where maintaining the original color is crucial. <\/p>\n\n\n\n For instance, when displaying product colors in an online store, the customer needs to see the exact color they are selecting to purchase.<\/p>\n\n\n\n In such scenarios, forced-color-adjust-none can ensure that the item’s color is accurately presented, regardless of the user’s Forced Colors Mode settings.<\/p>\n\n\n\n Subgrid<\/a> is a modern CSS feature that enables an element to align with its parent’s grid columns or rows, allowing for precise placement of its children within the overarching grid structure.<\/p>\n\n\n\n Tailwind Utility structure leveraging subgrid for components like navigation, menus, and other things to ensure alignment. <\/p>\n\n\n\n For instance, if one menu item includes an icon, the subgrid helps indent all other items accordingly, maintaining a clean and uniform text alignment across the board.<\/p>\n\n\n\n In a normal CSS, the subgrid property is already present for a very long, Applying display: grid to an element turns its direct children into grid items, which can be arranged on the grid. <\/p>\n\n\n\n However, sub-elements follow the normal document flow. To create a grid within a grid, you can designate a grid item as a grid container, creating a ‘nested’ grid. <\/p>\n\n\n\n These nested grids function independently and don’t inherit sizing from the parent grid, which can make alignment challenging. <\/p>\n\n\n\n By using the subgrid value on grid-template-columns or grid-template-rows, the nested grid can align directly with the parent grid’s tracks, ensuring a cohesive layout.<\/p>\n\n\n\n if constantly typing h-5 w-5 for avatars has become tedious, Tailwind CSS v3.4 brings a welcome change. Tailwind introduced the size-* utility, which simultaneously sets both width and height. <\/p>\n\n\n\n Though we debated the naming\u2014size-* seemed lengthy compared to w-* or h-, and s-<\/em> was too obscure\u2014we’ve found that the clarity of size-* outweighs any brevity. Anyone can do it like this:<\/p>\n\n\n\n Instead of,<\/p>\n\n\n\n In practice, it’s a game-changer, offering convenience and simplicity, particularly when paired with variants or intricate arbitrary values.<\/p>\n\n\n\n Tailwind Also Supports nested styling, By Applying ‘*’<\/strong> you can apply any style over all of its child elements.<\/p>\n\n\n\n This new * variant targets direct children, enabling you to do things like flex *:justify-start to align all children to the start of the flex container.<\/p>\n\n\n\n While it’s generally better to style children directly. The * variant is invaluable when you lack control over the child elements or need to apply contextual styles. <\/p>\n\n\n\n It’s also combinable with other variants, such as hover:*:underline to underline children on hover.<\/p>\n\n\n\n Though this feature is powerful, use it wisely to avoid unintended consequences. We’re eager to see the creative\u2014and hopefully not regrettable\u2014ways it gets utilized.<\/p>\n\n\n\n The :has()<\/strong> pseudo-class is a groundbreaking addition to CSS, allowing for styling based on child or sibling elements, and reducing the need for JavaScript.<\/p>\n\n\n\n It’s particularly useful in complex designs, like our text inputs with wrapper elements, where we can now style based on the :disabled<\/strong> state of an input. <\/p>\n\n\n\n With recent support in all major browsers, :has()<\/strong> is poised to transform CSS styling as we know it.<\/p>\n\n\n\n The :has()<\/strong> CSS property represents a significant advancement in styling capabilities, effectively acting like a conditional statement within CSS.<\/p>\n\n\n\n It allows developers to target and style parent elements based on the presence of specific child or sibling elements, thereby simplifying the process of creating dynamic, context-sensitive designs. <\/p>\n\n\n\n This property reduces the reliance on JavaScript for DOM manipulation and minimizes it. The need for extra classes or complex CSS selectors, streamlining the development process. <\/p>\n\n\n\n And offering a more powerful way to control the look and feel of web components based on their content structure.<\/p>\n\n\n\n The introduction of the vh<\/strong> unit was a game-changer for creating full-height layouts, but mobile browsers with their dynamic menu bars. <\/p>\n\n\n\n And taskbars dampened the excitement, as vh<\/strong> didn’t account for their variability.<\/p>\n\n\n\n Enter the new era with dvh<\/strong>, lvh<\/strong>, and svh<\/strong> units, specifically engineered to handle the quirks of mobile browser interfaces.<\/p>\n\n\n\n Tailwind CSS seamlessly integrates these units in the form of utility classes, making full-height designs on mobile as straightforward and reliable as we always hoped they’d be.<\/p>\n\n\n\n Dark mode isn’t just a design trend\u2014it’s a usability feature that enhances accessibility and reduces eye strain. With Tailwind CSS, implementing and optimizing dark mode has never been easier.<\/p>\n\n\n\n Tailwind CSS simplifies the implementation of dark mode on your website, a feature that’s increasingly essential with its integration into many operating systems. <\/p>\n\n\n\n By utilizing Tailwinds dark variant, you can easily define styles that activate when dark mode is preferred by the user’s system settings. <\/p>\n\n\n\n This default behavior aligns with the prefers-color-scheme media feature.<\/p>\n\n\n\n However, for a more hands-on approach, Tailwind also supports a ‘selector’ strategy, allowing for manual toggling of dark mode.<\/p>\n\n\n\n To enable manual dark mode toggling, switch to the selector strategy. <\/p>\n\n\n\n This approach applies dark:<\/strong>{class} styles whenever the dark class exists in the HTML hierarchy, rather than relying on system preferences.<\/p>\n\n\n\n Remember to include any prefixes from your Tailwind configuration when adding the dark class. For instance, with a tw-<\/strong> prefix, use tw-dark <\/strong>to trigger dark mode.<\/p>\n\n\n\n You can apply dark:<\/strong> class on the HTML element through JavaScript, by reading a saved preference.<\/p>\n\n\n\n Such as from local storage or by system default settings, and adjusting the DOM to reflect its user’s choice.<\/p>\n\n\n\n Tailwind CSS optimizes dark mode styling by generating classes on-demand, keeping stylesheets lean and load times fast.<\/p>\n\n\n\n Tailwinds Just-In-Time (JIT) mode ensures that only necessary styles are created, by avoiding extra bloat. This results in a seamless and efficient dark mode experience, both for developers and users.<\/p>\n\n\n\n Tailwinds’ utility-first approach is flexible in adopting component-based design patterns for reusable and maintainable code.<\/p>\n\n\n\n In the realm of traditional templating languages like ERB or Twig, crafting a template partial for a basic element such as a button can sometimes seem unnecessary.<\/p>\n\n\n\n Especially when a single CSS class like btn could do the job.<\/p>\n\n\n\n Although it’s beneficial to use template partials for more elaborate components to keep your code organized. Tailwind CSS provides a streamlined alternative for simpler cases.<\/p>\n\n\n\n Tailwind’s @apply directive allows you to consolidate common utility patterns into custom CSS classes, bypassing the need for a template partial when it feels excessive for simple elements. <\/p>\n\n\n\n This can be particularly useful for creating reusable button styles without the overhead of a partial. Like this:<\/p>\n\n\n\n Some Other very useful directives and functions present in Tailwind are:<\/p>\n\n\n\n Anyone can use the Tailwind CSS also provides modifiers for likely about everything you\u2019ll ever need, including:<\/p>\n\n\n\n Various states like It also provides media queries responsive breakpoints like md:<\/strong>, sm:<\/strong>, lg:<\/strong>, etc.<\/p>\n\n\n\n And ltr<\/strong> and rtl<\/strong> directives as well for directions<\/p>\n\n\n\n Tailwind CSS continues to push the boundaries of modern web development, offering unparalleled flexibility, performance, and developer experience. <\/p>\n\n\n\n By mastering its advanced features and best practices, you’ll unlock new possibilities for crafting exceptional user interfaces and experiences. <\/p>\n\n\n\n It is among the best CSS libraries for headless development due to its utility-first approach.<\/p>\n\n\n\n For more, you can check out TaiwlindCss’s official documentation<\/strong><\/a> you want to set it up with next.js you can check our other blog regarding this: Tailwind implementation in Next.js: A Beginner\u2019s Guide<\/a><\/em><\/strong><\/p>\n\n\n\nForced-colors<\/code> variant of tailwind<\/h3>\n\n\n\n<system-color><\/a><\/code><\/strong> usually reflects the default color choices used for the different parts of a web page.
<\/p>\n\n\n\n<ul class="flex font-bold text-xl text-slate-400 appearance-auto flex-col gap-4 p-10">\n <li class="list-disc">List Appearance<\/li>\n <li class="appearance-none forced-colors:appearance-auto">List Appearance<\/li>\n<\/ul><\/pre>\n\n\n\n
forced-color-adjust<\/code> utilities<\/strong>.<\/p>\n\n\n\n<ul class="forced-color-adjust-none">\n <li class="appearance-none forced-colors:appearance-auto ..."> Force Color On List Appearance<\/li\n<\/ul><\/pre>\n\n\n\n
CSS Subgrid Support In Tailwind<\/h3>\n\n\n\n
<div role="menu" class="grid grid-cols-[auto_1fr]">\n <div class="grid-cols-subgrid col-span-2">\n <svg class="mr-2">Icon1<\/svg>\n <span class="col-start-2">Account<\/span>\n <\/div>\n <div class="grid-cols-subgrid col-span-2">\n <svg class="mr-2">Icon2<\/svg>\n <span class="col-start-2">Settings<\/span>\n <\/div>\n <div class="grid-cols-subgrid col-span-2">\n <svg class="mr-2">Icon3<\/svg>\n <span class="col-start-2">Sign out<\/span>\n <\/div>\n<\/div><\/pre>\n\n\n\n
Tailwind’s New Size Utility Class<\/h3>\n\n\n\n
<div class="grid-cols-subgrid col-span-2">\n <svg class="mr-2 size-10">Icon3<\/svg>\n <span class="col-start-2">Sign out<\/span>\n <\/div><\/pre>\n\n\n\n
<div class="grid-cols-subgrid col-span-2">\n <svg class="mr-2 h-10 w-10">Icon3<\/svg>\n <span class="col-start-2">Sign out<\/span>\n <\/div><\/pre>\n\n\n\n
Nested Styling In Tailwind<\/h3>\n\n\n\n
<div\n role="menu"\n class="data-[slot=description]:*:grid-cols-subgrid data-[slot=description]:*:col-span-2 grid grid-cols-[auto_1fr]"\n>\n <div data-slot="subgrid">\n <svg class="mr-2">Icon1<\/svg>\n <span class="col-start-2">Account<\/span>\n <\/div>\n <div data-slot="subgrid">\n <svg class="mr-2">Icon2<\/svg>\n <span class="col-start-2">Settings<\/span>\n <\/div>\n <div data-slot="subgrid">\n <svg class="mr-2">Icon3<\/svg>\n <span class="col-start-2">Sign out<\/span>\n <\/div>\n<\/div><\/pre>\n\n\n\n
:has() CSS Property Support<\/h3>\n\n\n\n
<label class="has-[:checked]:ring-purple-700 has-[:checked]:text-purple-950 has-[:checked]:bg-indigo-50 ..">\n Custom Radio\n <input type="radio" class="hidden" \/>\n<\/label><\/pre>\n\n\n\n
Tailwinds dynamic viewports<\/h3>\n\n\n\n
![\"responsive-design-by-tailwind-and-material\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/responsive-design-by-tailwind-and-material-1200x600.png\")
<\/figure>\n\n\n\n\n<strong>Utility classes\t CSS Properties\nh-svh\t height: 100svh\nh-lvh\t height: 100lvh\nh-dvh\t height: 100dvh\nmin-h-svh\t min-height: 100svh\nmin-h-lvh\t min-height: 100lvh\nmin-h-dvh\t min-height: 100dvh\nmax-h-svh\t max-height: 100svh\nmax-h-lvh\t max-height: 100lvh\nmax-h-dvh\t max-height: 100dvh<\/strong><\/pre>\n\n\n\n
Dark Mode Design: Implementation and Optimization<\/em><\/h2>\n\n\n\n
<div class="grid-cols-subgrid p-4 rounded-md col-span-2">\n <svg class="mr-2 h-10 w-10">Icon3<\/svg>\n <span class="col-start-2 dark:text-blue-50 dark:bg-blue-700 \n text-blue-700 bg-blue-50">Sign out<\/span>\n <\/div><\/pre>\n\n\n\n
\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n darkMode: 'selector',\n \/\/enabling selector strategy instead of class strategy\n}<\/pre>\n\n\n\nAbout Its Optimisation<\/h3>\n\n\n\n
Component-Based Design: Reusability and Flexibility<\/em><\/h2>\n\n\n\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer components {\n .btn-common {\n @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;\n }\n}<\/pre>\n\n\n\n<button class="btn-common">\n Save changes\n<\/button><\/pre>\n\n\n\n
Directives and functions in tailwinds<\/h3>\n\n\n\n
theme()<\/em><\/h4>\n\n\n\n
theme()<\/code> function to access your Tailwind config values using dot notation in your normal CSS files for core CSS. Like this:<\/p>\n\n\n\n.btn-blue {\n background-color: theme(colors.green.500);\n font-size: theme(fontSize-2xl);\n}<\/pre>\n\n\n\nHover and other states<\/em><\/h4>\n\n\n\n
:hover<\/code>, :focus<\/code><\/strong>, :first-child<\/strong><\/code>, and :required<\/strong><\/code> as pseudo-classes and ::before<\/strong><\/code>, ::after<\/code><\/strong>, ::placeholder<\/strong><\/code>, and ::selection<\/strong><\/code> as elements.<\/p>\n\n\n\nConclusion: Elevate Your Web Development with Tailwinds<\/em><\/h2>\n\n\n\n