🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 59 (from laksa071)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa059.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://tailwindcss.com/docs/adding-custom-styles\')), getAhrefsUnparsedNoserviceFromURL(\'https://tailwindcss.com/docs/adding-custom-styles\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/tailwindcss.com\/docs\/adding-custom-styles","crawl_time":1776300070,"first_indexed_time":1639074937,"http_code":200,"src_unparsed":"com,tailwindcss!\/docs\/adding-custom-styles s443","src_root_hash":"16242711095379765659","history_drop_reason":null,"meta_title":"Adding custom styles - Core concepts - Tailwind CSS","meta_descriptions":["Best practices for adding your own custom styles in Tailwind projects."],"attrs_boilerpipe_text":"Best practices for adding your own custom styles in Tailwind projects.\nOften the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you.\nTailwind has been designed from the ground up to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework.\nThis guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins.\nCustomizing your theme\nIf you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations using the\n@theme\ndirective in your CSS:\nCSS\n@theme\n{\n--font-display\n:\n\"Satoshi\"\n,\n\"sans-serif\"\n;\n--breakpoint-3xl\n:\n120\nrem\n;\n--color-avocado-100\n:\noklch\n(\n0.99 0 0\n);\n--color-avocado-200\n:\noklch\n(\n0.98 0.04 113.22\n);\n--color-avocado-300\n:\noklch\n(\n0.94 0.11 115.03\n);\n--color-avocado-400\n:\noklch\n(\n0.92 0.19 114.08\n);\n--color-avocado-500\n:\noklch\n(\n0.84 0.18 117.33\n);\n--color-avocado-600\n:\noklch\n(\n0.53 0.12 118.34\n);\n--ease-fluid\n:\ncubic-bezier\n(\n0.3\n,\n0\n,\n0\n,\n1\n);\n--ease-snappy\n:\ncubic-bezier\n(\n0.2\n,\n0\n,\n0\n,\n1\n);\n\/* ... *\/\n}\nLearn more about customizing your theme in the\ntheme variables documentation\n.\nUsing arbitrary values\nWhile you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect.\nWhen you find yourself really needing something like\ntop: 117px\nto get a background image in just the right spot, use Tailwind's square bracket notation to generate a class on the fly with any arbitrary value:\nHTML\n<\ndiv\nclass\n=\n\"\ntop-[117px]\n\"\n>\n\n<\/\ndiv\n>\nThis is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like\nhover\nand responsive modifiers like\nlg\n:\nHTML\n<\ndiv\nclass\n=\n\"\ntop-[117px]\nlg:top-[344px]\n\"\n>\n\n<\/\ndiv\n>\nThis works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more:\nHTML\n<\ndiv\nclass\n=\n\"\nbg-[#bada55]\ntext-[22px]\nbefore:content-['Festivus']\n\"\n>\n\n<\/\ndiv\n>\nIf you're referencing a CSS variable as an arbitrary value, you can use the custom property syntax:\nHTML\n<\ndiv\nclass\n=\n\"\nfill-(--my-brand-color)\n...\"\n>\n\n<\/\ndiv\n>\nThis is just a shorthand for\nfill-[var(--my-brand-color)]\nthat adds the\nvar()\nfunction for you automatically.\nArbitrary properties\nIf you ever need to use a CSS property that Tailwind doesn't include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS:\nHTML\n<\ndiv\nclass\n=\n\"\n[mask-type:luminance]\n\"\n>\n\n<\/\ndiv\n>\nThis is\nreally\nlike inline styles, but again with the benefit that you can use modifiers:\nHTML\n<\ndiv\nclass\n=\n\"\n[mask-type:luminance]\nhover:[mask-type:alpha]\n\"\n>\n\n<\/\ndiv\n>\nThis can be useful for things like CSS variables as well, especially when they need to change under different conditions:\nHTML\n<\ndiv\nclass\n=\n\"\n[--scroll-offset:56px]\nlg:[--scroll-offset:44px]\n\"\n>\n\n<\/\ndiv\n>\nArbitrary variants\nArbitrary\nvariants\nare like arbitrary values but for doing on-the-fly selector modification, like you can with built-in pseudo-class variants like\nhover:{utility}\nor responsive variants like\nmd:{utility}\nbut using square bracket notation directly in your HTML.\nHTML\n<\nul\nrole\n=\n\"list\"\n>\n{#each items as item}\n<\nli\nclass\n=\n\"lg:\n[&:nth-child(-n+3)]\n:hover:underline\"\n>\n{item}\n<\/\nli\n>\n{\/each}\n<\/\nul\n>\nLearn more in the\narbitrary variants\ndocumentation.\nHandling whitespace\nWhen an arbitrary value needs to contain a space, use an underscore (\n_\n) instead and Tailwind will automatically convert it to a space at build-time:\nHTML\n<\ndiv\nclass\n=\n\"grid\ngrid-cols-[1fr_500px_2fr]\n\"\n>\n\n<\/\ndiv\n>\nIn situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:\nHTML\n<\ndiv\nclass\n=\n\"\nbg-[url('\/what_a_rush.png')]\n\"\n>\n\n<\/\ndiv\n>\nIn the rare case that you actually need to use an underscore but it's ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won't convert it to a space:\nHTML\n<\ndiv\nclass\n=\n\"\nbefore:content-['hello\\_world']\n\"\n>\n\n<\/\ndiv\n>\nIf you're using something like JSX where the backslash is stripped from the rendered HTML, use\nString.raw()\nso the backslash isn't treated as a JavaScript escape character:\n<\ndiv\nclassName\n={\nString\n.\nraw\n`before:content-['hello\n\\_\nworld']`\n}>\n\n<\/\ndiv\n>\nResolving ambiguities\nMany utilities in Tailwind share a common namespace but map to different CSS properties. For example\ntext-lg\nand\ntext-black\nboth share the\ntext-\nnamespace, but one is for\nfont-size\nand the other is for\ncolor\n.\nWhen using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in:\nHTML\n\n<\ndiv\nclass\n=\n\"\ntext-[22px]\n\"\n>\n...\n<\/\ndiv\n>\n\n<\ndiv\nclass\n=\n\"\ntext-[#bada55]\n\"\n>\n...\n<\/\ndiv\n>\nSometimes it really is ambiguous though, for example when using CSS variables:\nHTML\n<\ndiv\nclass\n=\n\"\ntext-(--my-var)\n\"\n>\n...\n<\/\ndiv\n>\nIn these situations, you can \"hint\" the underlying type to Tailwind by adding a\nCSS data type\nbefore the value:\nHTML\n\n<\ndiv\nclass\n=\n\"\ntext-(length:--my-var)\n\"\n>\n...\n<\/\ndiv\n>\n\n<\ndiv\nclass\n=\n\"\ntext-(color:--my-var)\n\"\n>\n...\n<\/\ndiv\n>\nUsing custom CSS\nWhile Tailwind is designed to handle the bulk of your styling needs, there is nothing stopping you from just writing plain CSS when you need to:\nCSS\n@import\n\"tailwindcss\"\n;\n.my-custom-style\n{\n\/* ... *\/\n}\nAdding base styles\nIf you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the\nhtml\nor\nbody\nelements:\nHTML\n<!\ndoctype\nhtml\n>\n<\nhtml\nlang\n=\n\"en\"\nclass\n=\n\"\nbg-gray-100\nfont-serif\ntext-gray-900\n\"\n>\n\n<\/\nhtml\n>\nThis keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file.\nIf you want to add your own default base styles for specific HTML elements, use the\n@layer\ndirective to add those styles to Tailwind's\nbase\nlayer:\nCSS\n@layer\nbase\n{\nh1\n{\nfont-size\n:\nvar\n(\n--text-2xl\n);\n}\nh2\n{\nfont-size\n:\nvar\n(\n--text-xl\n);\n}\n}\nAdding component classes\nUse the\ncomponents\nlayer for any more complicated classes you want to add to your project that you'd still like to be able to override with utility classes.\nTraditionally these would be classes like\ncard\n,\nbtn\n,\nbadge\n— that kind of thing.\nCSS\n@layer\ncomponents\n{\n.card\n{\nbackground-color\n:\nvar\n(\n--color-white\n);\nborder-radius\n:\nvar\n(\n--radius-lg\n);\npadding\n:\n--spacing(6\n);\nbox-shadow\n:\nvar\n(\n--shadow-xl\n);\n}\n}\nBy defining component classes in the\ncomponents\nlayer, you can still use utility classes to override them when necessary:\nHTML\n\n<\ndiv\nclass\n=\n\"\ncard\nrounded-none\n\"\n>\n\n<\/\ndiv\n>\nUsing Tailwind you probably don't need these types of classes as often as you think. Read our guide on\nmanaging duplication\nfor our recommendations.\nThe\ncomponents\nlayer is also a good place to put custom styles for any third-party components you're using:\nCSS\n@layer\ncomponents\n{\n.select2-dropdown\n{\n\/* ... *\/\n}\n}\nUsing variants\nUse the\n@variant\ndirective to apply a Tailwind variant within custom CSS:\napp.css\n.my-element\n{\nbackground\n:\nwhite\n;\n@variant\ndark\n{\nbackground: black;\n}\n}\nCompiled CSS\n.my-element\n{\nbackground\n:\nwhite\n;\n@\nmedia\n(\nprefers-color-scheme\n:\ndark\n) {\nbackground\n:\nblack\n;\n}\n}\nIf you need to apply multiple variants at the same time, use nesting:\napp.css\n.my-element\n{\nbackground\n:\nwhite\n;\n@variant\ndark\n{\n@variant\nhover\n{\nbackground: black;\n}\n}\n}\nCompiled CSS\n.my-element\n{\nbackground\n:\nwhite\n;\n@\nmedia\n(\nprefers-color-scheme\n:\ndark\n) {\n&:\nhover {\n@media (hover: hover\n) {\nbackground\n:\nblack\n;\n}\n}\n}\n}\nAdding custom utilities\nSimple utilities\nIn addition to using the utilities that ship with Tailwind, you can also add your own custom utilities. This can be useful when there's a CSS feature you'd like to use in your project that Tailwind doesn't include utilities for out of the box.\nUse the\n@utility\ndirective to add a custom utility to your project:\nCSS\n@utility\ncontent-auto\n{\ncontent-visibility: auto;\n}\nYou can now use this utility in your HTML:\nHTML\n<\ndiv\nclass\n=\n\"\ncontent-auto\n\"\n>\n\n<\/\ndiv\n>\nIt will also work with variants like\nhover\n,\nfocus\nand\nlg\n:\nHTML\n<\ndiv\nclass\n=\n\"\nhover:content-auto\n\"\n>\n\n<\/\ndiv\n>\nCustom utilities are automatically inserted into the\nutilities\nlayer along with all of the built-in utilities in the framework.\nComplex utilities\nIf your custom utility is more complex than a single class name, use nesting to define the utility:\nCSS\n@utility\nscrollbar-hidden\n{\n&::-webkit-scrollbar\n{\ndisplay\n:\nnone\n;\n}\n}\nFunctional utilities\nIn addition to registering simple utilities with the\n@utility\ndirective, you can also register functional utilities that accept an argument:\nCSS\n@utility\ntab-*\n{\ntab-size: --value(--tab-size-*);\n}\nThe special\n--value()\nfunction is used to resolve the utility value.\nMatching theme values\nUse the\n--value(--theme-key-*)\nsyntax to resolve the utility value against a set of theme keys:\nCSS\n@theme\n{\n--tab-size-2\n:\n2\n;\n--tab-size-4\n:\n4\n;\n--tab-size-github\n:\n8\n;\n}\n@utility\ntab-*\n{\ntab-size: --value(--tab-size-*);\n}\nThis will match utilities like\ntab-2\n,\ntab-4\n, and\ntab-github\n.\nBare values\nTo resolve the value as a bare value, use the\n--value({type})\nsyntax, where\n{type}\nis the data type you want to validate the bare value as:\nCSS\n@utility\ntab-*\n{\ntab-size: --value(integer);\n}\nThis will match utilities like\ntab-1\nand\ntab-76\n.\nAvailable bare value data types are:\nnumber\n,\ninteger\n,\nratio\n, and\npercentage\n.\nLiteral values\nTo support literal values, use the\n--value('literal')\nsyntax (notice the quotes):\nCSS\n@utility\ntab-*\n{\ntab-size: --value(\"inherit\", \"initial\", \"unset\");\n}\nThis will match utilities like\ntab-inherit\n,\ntab-initial\n, and\ntab-unset\n.\nArbitrary values\nTo support arbitrary values, use the\n--value([{type}])\nsyntax (notice the square brackets) to tell Tailwind which types are supported as an arbitrary value:\nCSS\n@utility\ntab-*\n{\ntab-size: --value([integer]);\n}\nThis will match utilities like\ntab-[1]\nand\ntab-[76]\n.\nAvailable arbitrary value data types are:\nabsolute-size\n,\nangle\n,\nbg-size\n,\ncolor\n,\nfamily-name\n,\ngeneric-name\n,\nimage\n,\ninteger\n,\nlength\n,\nline-width\n,\nnumber\n,\npercentage\n,\nposition\n,\nratio\n,\nrelative-size\n,\nurl\n,\nvector\n, and\n*\n.\nSupporting theme, bare, and arbitrary values together\nAll three forms of the\n--value()\nfunction can be used within a rule as multiple declarations, and any declarations that fail to resolve will be omitted in the output:\nCSS\n@theme\n{\n--tab-size-github\n:\n8\n;\n}\n@utility\ntab-*\n{\ntab-size: --value([integer]);\ntab-size: --value(integer);\ntab-size: --value(--tab-size-*);\n}\nThis makes it possible to treat the value differently in each case if necessary, for example translating a bare integer to a percentage:\nCSS\n@utility\nopacity-*\n{\nopacity: --value([percentage]);\nopacity: calc(--value(integer) * 1%);\nopacity: --value(--opacity-*);\n}\nThe\n--value()\nfunction can also take multiple arguments and resolve them left to right if you don't need to treat the return value differently in different cases:\nCSS\n@theme\n{\n--tab-size-github\n:\n8\n;\n}\n@utility\ntab-*\n{\ntab-size: --value(--tab-size-*, integer, [integer]);\n}\n@utility\nopacity-*\n{\nopacity: calc(--value(integer) * 1%);\nopacity: --value(--opacity-*, [percentage]);\n}\nNegative values\nTo support negative values, register separate positive and negative utilities into separate declarations:\nCSS\n@utility\ninset-*\n{\ninset: --spacing(--value(integer));\ninset: --value([percentage], [length]);\n}\n@utility\n-inset-*\n{\ninset: --spacing(--value(integer) * -1);\ninset: calc(--value([percentage], [length]) * -1);\n}\nModifiers\nModifiers are handled using the\n--modifier()\nfunction which works exactly like the\n--value()\nfunction but operates on a modifier if present:\nCSS\n@utility\ntext-*\n{\nfont-size: --value(--text-*, [length]);\nline-height: --modifier(--leading-*, [length], [*]);\n}\nIf a modifier isn't present, any declaration depending on a modifier is just not included in the output.\nFractions\nTo handle fractions, we rely on the CSS\nratio\ndata type. If this is used with\n--value()\n, it's a signal to Tailwind to treat the value and modifier as a single value:\nCSS\n@utility\naspect-*\n{\naspect-ratio: --value(--aspect-ratio-*,\nratio, [ratio]\n);\n}\nThis will match utilities like\naspect-square\n,\naspect-3\/4\n, and\naspect-[7\/9]\n.\nAdding custom variants\nIn addition to using the variants that ship with Tailwind, you can also add your own custom variants using the\n@custom-variant\ndirective:\n@custom-variant\ntheme-midnight\n{\n&\n:where\n(\n[\ndata-theme\n=\n\"\nmidnight\n\"\n]\n*\n)\n{\n@\nslot\n;\n}\n}\nNow you can use the\ntheme-midnight:\n<utility>\nvariant in your HTML:\n<\nhtml\ndata-theme\n=\n\"midnight\"\n>\n<\nbutton\nclass\n=\n\"\ntheme-midnight:bg-black\n...\"\n><\/\nbutton\n>\n<\/\nhtml\n>\nYou can create variants using the shorthand syntax when nesting isn't required:\n@custom-variant\ntheme-midnight (&:where([data-theme=\"midnight\"] *))\n;\nWhen a custom variant has multiple rules, they can be nested within each other:\n@custom-variant\nany-hover\n{\n@media\n(\nany-hover\n:\nhover\n)\n{\n&\n:hover\n{\n@\nslot\n;\n}\n}\n}","attrs_markdown":"v4.2\n\n`⌘K``Ctrl K`\n\n[Docs](https:\/\/tailwindcss.com\/docs)[Blog](https:\/\/tailwindcss.com\/blog)[Showcase](https:\/\/tailwindcss.com\/showcase)[Sponsor](https:\/\/tailwindcss.com\/sponsor)\n\n[Plus](https:\/\/tailwindcss.com\/plus?ref=top)\n\n1. Core concepts\n2. Adding custom styles\n\n- [Documentation](https:\/\/tailwindcss.com\/docs\/installation)\n- [Components](https:\/\/tailwindcss.com\/plus\/ui-blocks?ref=sidebar)\n- [Templates](https:\/\/tailwindcss.com\/plus\/templates?ref=sidebar)\n- [UI Kit](https:\/\/tailwindcss.com\/plus\/ui-kit?ref=sidebar)\n- [Playground](https:\/\/play.tailwindcss.com\/)\n- [CourseNew](https:\/\/tailwindcss.com\/build-uis-that-dont-suck)\n- [Community](https:\/\/tailwindcss.com\/insiders)\n\n### Getting started\n- [Installation](https:\/\/tailwindcss.com\/docs\/installation)\n- [Editor setup](https:\/\/tailwindcss.com\/docs\/editor-setup)\n- [Compatibility](https:\/\/tailwindcss.com\/docs\/compatibility)\n- [Upgrade guide](https:\/\/tailwindcss.com\/docs\/upgrade-guide)\n\n### Core concepts\n- [Styling with utility classes](https:\/\/tailwindcss.com\/docs\/styling-with-utility-classes)\n- [Hover, focus, and other states](https:\/\/tailwindcss.com\/docs\/hover-focus-and-other-states)\n- [Responsive design](https:\/\/tailwindcss.com\/docs\/responsive-design)\n- [Dark mode](https:\/\/tailwindcss.com\/docs\/dark-mode)\n- [Theme variables](https:\/\/tailwindcss.com\/docs\/theme)\n- [Colors](https:\/\/tailwindcss.com\/docs\/colors)\n- [Adding custom styles](https:\/\/tailwindcss.com\/docs\/adding-custom-styles)\n- [Detecting classes in source files](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files)\n- [Functions and directives](https:\/\/tailwindcss.com\/docs\/functions-and-directives)\n\n### Base styles\n- [Preflight](https:\/\/tailwindcss.com\/docs\/preflight)\n\n### Layout\n- [aspect-ratio](https:\/\/tailwindcss.com\/docs\/aspect-ratio)\n- [columns](https:\/\/tailwindcss.com\/docs\/columns)\n- [break-after](https:\/\/tailwindcss.com\/docs\/break-after)\n- [break-before](https:\/\/tailwindcss.com\/docs\/break-before)\n- [break-inside](https:\/\/tailwindcss.com\/docs\/break-inside)\n- [box-decoration-break](https:\/\/tailwindcss.com\/docs\/box-decoration-break)\n- [box-sizing](https:\/\/tailwindcss.com\/docs\/box-sizing)\n- [display](https:\/\/tailwindcss.com\/docs\/display)\n- [float](https:\/\/tailwindcss.com\/docs\/float)\n- [clear](https:\/\/tailwindcss.com\/docs\/clear)\n- [isolation](https:\/\/tailwindcss.com\/docs\/isolation)\n- [object-fit](https:\/\/tailwindcss.com\/docs\/object-fit)\n- [object-position](https:\/\/tailwindcss.com\/docs\/object-position)\n- [overflow](https:\/\/tailwindcss.com\/docs\/overflow)\n- [overscroll-behavior](https:\/\/tailwindcss.com\/docs\/overscroll-behavior)\n- [position](https:\/\/tailwindcss.com\/docs\/position)\n- [top \/ right \/ bottom \/ left](https:\/\/tailwindcss.com\/docs\/top-right-bottom-left)\n- [visibility](https:\/\/tailwindcss.com\/docs\/visibility)\n- [z-index](https:\/\/tailwindcss.com\/docs\/z-index)\n\n### Flexbox & Grid\n- [flex-basis](https:\/\/tailwindcss.com\/docs\/flex-basis)\n- [flex-direction](https:\/\/tailwindcss.com\/docs\/flex-direction)\n- [flex-wrap](https:\/\/tailwindcss.com\/docs\/flex-wrap)\n- [flex](https:\/\/tailwindcss.com\/docs\/flex)\n- [flex-grow](https:\/\/tailwindcss.com\/docs\/flex-grow)\n- [flex-shrink](https:\/\/tailwindcss.com\/docs\/flex-shrink)\n- [order](https:\/\/tailwindcss.com\/docs\/order)\n- [grid-template-columns](https:\/\/tailwindcss.com\/docs\/grid-template-columns)\n- [grid-column](https:\/\/tailwindcss.com\/docs\/grid-column)\n- [grid-template-rows](https:\/\/tailwindcss.com\/docs\/grid-template-rows)\n- [grid-row](https:\/\/tailwindcss.com\/docs\/grid-row)\n- [grid-auto-flow](https:\/\/tailwindcss.com\/docs\/grid-auto-flow)\n- [grid-auto-columns](https:\/\/tailwindcss.com\/docs\/grid-auto-columns)\n- [grid-auto-rows](https:\/\/tailwindcss.com\/docs\/grid-auto-rows)\n- [gap](https:\/\/tailwindcss.com\/docs\/gap)\n- [justify-content](https:\/\/tailwindcss.com\/docs\/justify-content)\n- [justify-items](https:\/\/tailwindcss.com\/docs\/justify-items)\n- [justify-self](https:\/\/tailwindcss.com\/docs\/justify-self)\n- [align-content](https:\/\/tailwindcss.com\/docs\/align-content)\n- [align-items](https:\/\/tailwindcss.com\/docs\/align-items)\n- [align-self](https:\/\/tailwindcss.com\/docs\/align-self)\n- [place-content](https:\/\/tailwindcss.com\/docs\/place-content)\n- [place-items](https:\/\/tailwindcss.com\/docs\/place-items)\n- [place-self](https:\/\/tailwindcss.com\/docs\/place-self)\n\n### Spacing\n- [padding](https:\/\/tailwindcss.com\/docs\/padding)\n- [margin](https:\/\/tailwindcss.com\/docs\/margin)\n\n### Sizing\n- [width](https:\/\/tailwindcss.com\/docs\/width)\n- [min-width](https:\/\/tailwindcss.com\/docs\/min-width)\n- [max-width](https:\/\/tailwindcss.com\/docs\/max-width)\n- [height](https:\/\/tailwindcss.com\/docs\/height)\n- [min-height](https:\/\/tailwindcss.com\/docs\/min-height)\n- [max-height](https:\/\/tailwindcss.com\/docs\/max-height)\n- [inline-size](https:\/\/tailwindcss.com\/docs\/inline-size)\n- [min-inline-size](https:\/\/tailwindcss.com\/docs\/min-inline-size)\n- [max-inline-size](https:\/\/tailwindcss.com\/docs\/max-inline-size)\n- [block-size](https:\/\/tailwindcss.com\/docs\/block-size)\n- [min-block-size](https:\/\/tailwindcss.com\/docs\/min-block-size)\n- [max-block-size](https:\/\/tailwindcss.com\/docs\/max-block-size)\n\n### Typography\n- [font-family](https:\/\/tailwindcss.com\/docs\/font-family)\n- [font-size](https:\/\/tailwindcss.com\/docs\/font-size)\n- [font-smoothing](https:\/\/tailwindcss.com\/docs\/font-smoothing)\n- [font-style](https:\/\/tailwindcss.com\/docs\/font-style)\n- [font-weight](https:\/\/tailwindcss.com\/docs\/font-weight)\n- [font-stretch](https:\/\/tailwindcss.com\/docs\/font-stretch)\n- [font-variant-numeric](https:\/\/tailwindcss.com\/docs\/font-variant-numeric)\n- [font-feature-settings](https:\/\/tailwindcss.com\/docs\/font-feature-settings)\n- [letter-spacing](https:\/\/tailwindcss.com\/docs\/letter-spacing)\n- [line-clamp](https:\/\/tailwindcss.com\/docs\/line-clamp)\n- [line-height](https:\/\/tailwindcss.com\/docs\/line-height)\n- [list-style-image](https:\/\/tailwindcss.com\/docs\/list-style-image)\n- [list-style-position](https:\/\/tailwindcss.com\/docs\/list-style-position)\n- [list-style-type](https:\/\/tailwindcss.com\/docs\/list-style-type)\n- [text-align](https:\/\/tailwindcss.com\/docs\/text-align)\n- [color](https:\/\/tailwindcss.com\/docs\/color)\n- [text-decoration-line](https:\/\/tailwindcss.com\/docs\/text-decoration-line)\n- [text-decoration-color](https:\/\/tailwindcss.com\/docs\/text-decoration-color)\n- [text-decoration-style](https:\/\/tailwindcss.com\/docs\/text-decoration-style)\n- [text-decoration-thickness](https:\/\/tailwindcss.com\/docs\/text-decoration-thickness)\n- [text-underline-offset](https:\/\/tailwindcss.com\/docs\/text-underline-offset)\n- [text-transform](https:\/\/tailwindcss.com\/docs\/text-transform)\n- [text-overflow](https:\/\/tailwindcss.com\/docs\/text-overflow)\n- [text-wrap](https:\/\/tailwindcss.com\/docs\/text-wrap)\n- [text-indent](https:\/\/tailwindcss.com\/docs\/text-indent)\n- [vertical-align](https:\/\/tailwindcss.com\/docs\/vertical-align)\n- [white-space](https:\/\/tailwindcss.com\/docs\/white-space)\n- [word-break](https:\/\/tailwindcss.com\/docs\/word-break)\n- [overflow-wrap](https:\/\/tailwindcss.com\/docs\/overflow-wrap)\n- [hyphens](https:\/\/tailwindcss.com\/docs\/hyphens)\n- [content](https:\/\/tailwindcss.com\/docs\/content)\n\n### Backgrounds\n- [background-attachment](https:\/\/tailwindcss.com\/docs\/background-attachment)\n- [background-clip](https:\/\/tailwindcss.com\/docs\/background-clip)\n- [background-color](https:\/\/tailwindcss.com\/docs\/background-color)\n- [background-image](https:\/\/tailwindcss.com\/docs\/background-image)\n- [background-origin](https:\/\/tailwindcss.com\/docs\/background-origin)\n- [background-position](https:\/\/tailwindcss.com\/docs\/background-position)\n- [background-repeat](https:\/\/tailwindcss.com\/docs\/background-repeat)\n- [background-size](https:\/\/tailwindcss.com\/docs\/background-size)\n\n### Borders\n- [border-radius](https:\/\/tailwindcss.com\/docs\/border-radius)\n- [border-width](https:\/\/tailwindcss.com\/docs\/border-width)\n- [border-color](https:\/\/tailwindcss.com\/docs\/border-color)\n- [border-style](https:\/\/tailwindcss.com\/docs\/border-style)\n- [outline-width](https:\/\/tailwindcss.com\/docs\/outline-width)\n- [outline-color](https:\/\/tailwindcss.com\/docs\/outline-color)\n- [outline-style](https:\/\/tailwindcss.com\/docs\/outline-style)\n- [outline-offset](https:\/\/tailwindcss.com\/docs\/outline-offset)\n\n### Effects\n- [box-shadow](https:\/\/tailwindcss.com\/docs\/box-shadow)\n- [text-shadow](https:\/\/tailwindcss.com\/docs\/text-shadow)\n- [opacity](https:\/\/tailwindcss.com\/docs\/opacity)\n- [mix-blend-mode](https:\/\/tailwindcss.com\/docs\/mix-blend-mode)\n- [background-blend-mode](https:\/\/tailwindcss.com\/docs\/background-blend-mode)\n- [mask-clip](https:\/\/tailwindcss.com\/docs\/mask-clip)\n- [mask-composite](https:\/\/tailwindcss.com\/docs\/mask-composite)\n- [mask-image](https:\/\/tailwindcss.com\/docs\/mask-image)\n- [mask-mode](https:\/\/tailwindcss.com\/docs\/mask-mode)\n- [mask-origin](https:\/\/tailwindcss.com\/docs\/mask-origin)\n- [mask-position](https:\/\/tailwindcss.com\/docs\/mask-position)\n- [mask-repeat](https:\/\/tailwindcss.com\/docs\/mask-repeat)\n- [mask-size](https:\/\/tailwindcss.com\/docs\/mask-size)\n- [mask-type](https:\/\/tailwindcss.com\/docs\/mask-type)\n\n### Filters\n- [filter](https:\/\/tailwindcss.com\/docs\/filter)\n  - [blur](https:\/\/tailwindcss.com\/docs\/filter-blur)\n  - [brightness](https:\/\/tailwindcss.com\/docs\/filter-brightness)\n  - [contrast](https:\/\/tailwindcss.com\/docs\/filter-contrast)\n  - [drop-shadow](https:\/\/tailwindcss.com\/docs\/filter-drop-shadow)\n  - [grayscale](https:\/\/tailwindcss.com\/docs\/filter-grayscale)\n  - [hue-rotate](https:\/\/tailwindcss.com\/docs\/filter-hue-rotate)\n  - [invert](https:\/\/tailwindcss.com\/docs\/filter-invert)\n  - [saturate](https:\/\/tailwindcss.com\/docs\/filter-saturate)\n  - [sepia](https:\/\/tailwindcss.com\/docs\/filter-sepia)\n- [backdrop-filter](https:\/\/tailwindcss.com\/docs\/backdrop-filter)\n  - [blur](https:\/\/tailwindcss.com\/docs\/backdrop-filter-blur)\n  - [brightness](https:\/\/tailwindcss.com\/docs\/backdrop-filter-brightness)\n  - [contrast](https:\/\/tailwindcss.com\/docs\/backdrop-filter-contrast)\n  - [grayscale](https:\/\/tailwindcss.com\/docs\/backdrop-filter-grayscale)\n  - [hue-rotate](https:\/\/tailwindcss.com\/docs\/backdrop-filter-hue-rotate)\n  - [invert](https:\/\/tailwindcss.com\/docs\/backdrop-filter-invert)\n  - [opacity](https:\/\/tailwindcss.com\/docs\/backdrop-filter-opacity)\n  - [saturate](https:\/\/tailwindcss.com\/docs\/backdrop-filter-saturate)\n  - [sepia](https:\/\/tailwindcss.com\/docs\/backdrop-filter-sepia)\n\n### Tables\n- [border-collapse](https:\/\/tailwindcss.com\/docs\/border-collapse)\n- [border-spacing](https:\/\/tailwindcss.com\/docs\/border-spacing)\n- [table-layout](https:\/\/tailwindcss.com\/docs\/table-layout)\n- [caption-side](https:\/\/tailwindcss.com\/docs\/caption-side)\n\n### Transitions & Animation\n- [transition-property](https:\/\/tailwindcss.com\/docs\/transition-property)\n- [transition-behavior](https:\/\/tailwindcss.com\/docs\/transition-behavior)\n- [transition-duration](https:\/\/tailwindcss.com\/docs\/transition-duration)\n- [transition-timing-function](https:\/\/tailwindcss.com\/docs\/transition-timing-function)\n- [transition-delay](https:\/\/tailwindcss.com\/docs\/transition-delay)\n- [animation](https:\/\/tailwindcss.com\/docs\/animation)\n\n### Transforms\n- [backface-visibility](https:\/\/tailwindcss.com\/docs\/backface-visibility)\n- [perspective](https:\/\/tailwindcss.com\/docs\/perspective)\n- [perspective-origin](https:\/\/tailwindcss.com\/docs\/perspective-origin)\n- [rotate](https:\/\/tailwindcss.com\/docs\/rotate)\n- [scale](https:\/\/tailwindcss.com\/docs\/scale)\n- [skew](https:\/\/tailwindcss.com\/docs\/skew)\n- [transform](https:\/\/tailwindcss.com\/docs\/transform)\n- [transform-origin](https:\/\/tailwindcss.com\/docs\/transform-origin)\n- [transform-style](https:\/\/tailwindcss.com\/docs\/transform-style)\n- [translate](https:\/\/tailwindcss.com\/docs\/translate)\n\n### Interactivity\n- [accent-color](https:\/\/tailwindcss.com\/docs\/accent-color)\n- [appearance](https:\/\/tailwindcss.com\/docs\/appearance)\n- [caret-color](https:\/\/tailwindcss.com\/docs\/caret-color)\n- [color-scheme](https:\/\/tailwindcss.com\/docs\/color-scheme)\n- [cursor](https:\/\/tailwindcss.com\/docs\/cursor)\n- [field-sizing](https:\/\/tailwindcss.com\/docs\/field-sizing)\n- [pointer-events](https:\/\/tailwindcss.com\/docs\/pointer-events)\n- [resize](https:\/\/tailwindcss.com\/docs\/resize)\n- [scroll-behavior](https:\/\/tailwindcss.com\/docs\/scroll-behavior)\n- [scroll-margin](https:\/\/tailwindcss.com\/docs\/scroll-margin)\n- [scroll-padding](https:\/\/tailwindcss.com\/docs\/scroll-padding)\n- [scroll-snap-align](https:\/\/tailwindcss.com\/docs\/scroll-snap-align)\n- [scroll-snap-stop](https:\/\/tailwindcss.com\/docs\/scroll-snap-stop)\n- [scroll-snap-type](https:\/\/tailwindcss.com\/docs\/scroll-snap-type)\n- [touch-action](https:\/\/tailwindcss.com\/docs\/touch-action)\n- [user-select](https:\/\/tailwindcss.com\/docs\/user-select)\n- [will-change](https:\/\/tailwindcss.com\/docs\/will-change)\n\n### SVG\n- [fill](https:\/\/tailwindcss.com\/docs\/fill)\n- [stroke](https:\/\/tailwindcss.com\/docs\/stroke)\n- [stroke-width](https:\/\/tailwindcss.com\/docs\/stroke-width)\n\n### Accessibility\n- [forced-color-adjust](https:\/\/tailwindcss.com\/docs\/forced-color-adjust)\n\nCore concepts\n\n# Adding custom styles\nBest practices for adding your own custom styles in Tailwind projects.\n\nOften the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you.\n\nTailwind has been designed from the ground up to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework.\n\nThis guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins.\n\n## [Customizing your theme](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#customizing-your-theme)\nIf you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations using the `@theme` directive in your CSS:\n\nCSS\n```\n@theme {  --font-display: \"Satoshi\", \"sans-serif\";  --breakpoint-3xl: 120rem;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  \/* ... *\/}\n```\n\nLearn more about customizing your theme in the [theme variables documentation](https:\/\/tailwindcss.com\/docs\/theme).\n\n## [Using arbitrary values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-arbitrary-values)\nWhile you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect.\n\nWhen you find yourself really needing something like `top: 117px` to get a background image in just the right spot, use Tailwind's square bracket notation to generate a class on the fly with any arbitrary value:\n\nHTML\n```\n<div class=\"top-[117px]\">  <\/div>\n```\n\nThis is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like `hover` and responsive modifiers like `lg`:\n\nHTML\n```\n<div class=\"top-[117px] lg:top-[344px]\">  <\/div>\n```\n\nThis works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more:\n\nHTML\n```\n<div class=\"bg-[#bada55] text-[22px] before:content-['Festivus']\">  <\/div>\n```\n\nIf you're referencing a CSS variable as an arbitrary value, you can use the custom property syntax:\n\nHTML\n```\n<div class=\"fill-(--my-brand-color) ...\">  <\/div>\n```\n\nThis is just a shorthand for `fill-[var(--my-brand-color)]` that adds the `var()` function for you automatically.\n\n### [Arbitrary properties](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#arbitrary-properties)\nIf you ever need to use a CSS property that Tailwind doesn't include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS:\n\nHTML\n```\n<div class=\"[mask-type:luminance]\">  <\/div>\n```\n\nThis is *really* like inline styles, but again with the benefit that you can use modifiers:\n\nHTML\n```\n<div class=\"[mask-type:luminance] hover:[mask-type:alpha]\">  <\/div>\n```\n\nThis can be useful for things like CSS variables as well, especially when they need to change under different conditions:\n\nHTML\n```\n<div class=\"[--scroll-offset:56px] lg:[--scroll-offset:44px]\">  <\/div>\n```\n### [Arbitrary variants](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#arbitrary-variants)\nArbitrary *variants* are like arbitrary values but for doing on-the-fly selector modification, like you can with built-in pseudo-class variants like `hover:{utility}` or responsive variants like `md:{utility}` but using square bracket notation directly in your HTML.\n\nHTML\n```\n<ul role=\"list\">  {#each items as item}  <li class=\"lg:[&:nth-child(-n+3)]:hover:underline\">{item}<\/li>  {\/each}<\/ul>\n```\n\nLearn more in the [arbitrary variants](https:\/\/tailwindcss.com\/docs\/hover-focus-and-other-states#using-arbitrary-variants) documentation.\n\n### [Handling whitespace](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#handling-whitespace)\nWhen an arbitrary value needs to contain a space, use an underscore (`_`) instead and Tailwind will automatically convert it to a space at build-time:\n\nHTML\n```\n<div class=\"grid grid-cols-[1fr_500px_2fr]\">  <\/div>\n```\n\nIn situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:\n\nHTML\n```\n<div class=\"bg-[url('\/what_a_rush.png')]\">  <\/div>\n```\n\nIn the rare case that you actually need to use an underscore but it's ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won't convert it to a space:\n\nHTML\n```\n<div class=\"before:content-['hello\\_world']\">  <\/div>\n```\n\nIf you're using something like JSX where the backslash is stripped from the rendered HTML, use [String.raw()](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/raw) so the backslash isn't treated as a JavaScript escape character:\n```\n<div className={String.raw`before:content-['hello\\_world']`}>  <\/div>\n```\n### [Resolving ambiguities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#resolving-ambiguities)\nMany utilities in Tailwind share a common namespace but map to different CSS properties. For example `text-lg` and `text-black` both share the `text-` namespace, but one is for `font-size` and the other is for `color`.\n\nWhen using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in:\n\nHTML\n```\n<div class=\"text-[22px]\">...<\/div><div class=\"text-[#bada55]\">...<\/div>\n```\n\nSometimes it really is ambiguous though, for example when using CSS variables:\n\nHTML\n```\n<div class=\"text-(--my-var)\">...<\/div>\n```\n\nIn these situations, you can \"hint\" the underlying type to Tailwind by adding a [CSS data type](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Types) before the value:\n\nHTML\n```\n<div class=\"text-(length:--my-var)\">...<\/div><div class=\"text-(color:--my-var)\">...<\/div>\n```\n## [Using custom CSS](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-custom-css)\nWhile Tailwind is designed to handle the bulk of your styling needs, there is nothing stopping you from just writing plain CSS when you need to:\n\nCSS\n```\n@import \"tailwindcss\";.my-custom-style {  \/* ... *\/}\n```\n### [Adding base styles](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-base-styles)\nIf you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the `html` or `body` elements:\n\nHTML\n```\n<!doctype html><html lang=\"en\" class=\"bg-gray-100 font-serif text-gray-900\">  <\/html>\n```\n\nThis keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file.\n\nIf you want to add your own default base styles for specific HTML elements, use the `@layer` directive to add those styles to Tailwind's `base` layer:\n\nCSS\n```\n@layer base {  h1 {    font-size: var(--text-2xl);  }  h2 {    font-size: var(--text-xl);  }}\n```\n### [Adding component classes](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-component-classes)\nUse the `components` layer for any more complicated classes you want to add to your project that you'd still like to be able to override with utility classes.\n\nTraditionally these would be classes like `card`, `btn`, `badge` — that kind of thing.\n\nCSS\n```\n@layer components {  .card {    background-color: var(--color-white);    border-radius: var(--radius-lg);    padding: --spacing(6);    box-shadow: var(--shadow-xl);  }}\n```\n\nBy defining component classes in the `components` layer, you can still use utility classes to override them when necessary:\n\nHTML\n```\n<div class=\"card rounded-none\">  <\/div>\n```\n\nUsing Tailwind you probably don't need these types of classes as often as you think. Read our guide on [managing duplication](https:\/\/tailwindcss.com\/docs\/styling-with-utility-classes#managing-duplication) for our recommendations.\n\nThe `components` layer is also a good place to put custom styles for any third-party components you're using:\n\nCSS\n```\n@layer components {  .select2-dropdown {    \/* ... *\/  }}\n```\n### [Using variants](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-variants)\nUse the `@variant` directive to apply a Tailwind variant within custom CSS:\n\napp.css\n```\n.my-element {  background: white;  @variant dark {    background: black;  }}\n```\n\nCompiled CSS\n```\n.my-element {  background: white;  @media (prefers-color-scheme: dark) {    background: black;  }}\n```\n\nIf you need to apply multiple variants at the same time, use nesting:\n\napp.css\n```\n.my-element {  background: white;  @variant dark {    @variant hover {      background: black;    }  }}\n```\n\nCompiled CSS\n```\n.my-element {  background: white;  @media (prefers-color-scheme: dark) {    &:hover {      @media (hover: hover) {        background: black;      }    }  }}\n```\n## [Adding custom utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-custom-utilities)\n### [Simple utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#simple-utilities)\nIn addition to using the utilities that ship with Tailwind, you can also add your own custom utilities. This can be useful when there's a CSS feature you'd like to use in your project that Tailwind doesn't include utilities for out of the box.\n\nUse the `@utility` directive to add a custom utility to your project:\n\nCSS\n```\n@utility content-auto {  content-visibility: auto;}\n```\n\nYou can now use this utility in your HTML:\n\nHTML\n```\n<div class=\"content-auto\">  <\/div>\n```\n\nIt will also work with variants like `hover`, `focus` and `lg`:\n\nHTML\n```\n<div class=\"hover:content-auto\">  <\/div>\n```\n\nCustom utilities are automatically inserted into the `utilities` layer along with all of the built-in utilities in the framework.\n\n### [Complex utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#complex-utilities)\nIf your custom utility is more complex than a single class name, use nesting to define the utility:\n\nCSS\n```\n@utility scrollbar-hidden {  &::-webkit-scrollbar {    display: none;  }}\n```\n### [Functional utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#functional-utilities)\nIn addition to registering simple utilities with the `@utility` directive, you can also register functional utilities that accept an argument:\n\nCSS\n```\n@utility tab-* {  tab-size: --value(--tab-size-*);}\n```\n\nThe special `--value()` function is used to resolve the utility value.\n\n#### [Matching theme values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#matching-theme-values)\nUse the `--value(--theme-key-*)` syntax to resolve the utility value against a set of theme keys:\n\nCSS\n```\n@theme {  --tab-size-2: 2;  --tab-size-4: 4;  --tab-size-github: 8;}@utility tab-* {  tab-size: --value(--tab-size-*);}\n```\n\nThis will match utilities like `tab-2`, `tab-4`, and `tab-github`.\n\n#### [Bare values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#bare-values)\nTo resolve the value as a bare value, use the `--value({type})` syntax, where `{type}` is the data type you want to validate the bare value as:\n\nCSS\n```\n@utility tab-* {  tab-size: --value(integer);}\n```\n\nThis will match utilities like `tab-1` and `tab-76`.\n\nAvailable bare value data types are: `number`, `integer`, `ratio`, and `percentage`.\n\n#### [Literal values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#literal-values)\nTo support literal values, use the `--value('literal')` syntax (notice the quotes):\n\nCSS\n```\n@utility tab-* {  tab-size: --value(\"inherit\", \"initial\", \"unset\");}\n```\n\nThis will match utilities like `tab-inherit`, `tab-initial`, and `tab-unset`.\n\n#### [Arbitrary values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#arbitrary-values)\nTo support arbitrary values, use the `--value([{type}])` syntax (notice the square brackets) to tell Tailwind which types are supported as an arbitrary value:\n\nCSS\n```\n@utility tab-* {  tab-size: --value([integer]);}\n```\n\nThis will match utilities like `tab-[1]` and `tab-[76]`.\n\nAvailable arbitrary value data types are: `absolute-size`, `angle`, `bg-size`, `color`, `family-name`, `generic-name`, `image`, `integer`, `length`, `line-width`, `number`, `percentage`, `position`, `ratio`, `relative-size`, `url`, `vector`, and `*`.\n\n#### [Supporting theme, bare, and arbitrary values together](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#supporting-theme-bare-and-arbitrary-values-together)\nAll three forms of the `--value()` function can be used within a rule as multiple declarations, and any declarations that fail to resolve will be omitted in the output:\n\nCSS\n```\n@theme {  --tab-size-github: 8;}@utility tab-* {  tab-size: --value([integer]);  tab-size: --value(integer);  tab-size: --value(--tab-size-*);}\n```\n\nThis makes it possible to treat the value differently in each case if necessary, for example translating a bare integer to a percentage:\n\nCSS\n```\n@utility opacity-* {  opacity: --value([percentage]);  opacity: calc(--value(integer) * 1%);  opacity: --value(--opacity-*);}\n```\n\nThe `--value()` function can also take multiple arguments and resolve them left to right if you don't need to treat the return value differently in different cases:\n\nCSS\n```\n@theme {  --tab-size-github: 8;}@utility tab-* {  tab-size: --value(--tab-size-*, integer, [integer]);}@utility opacity-* {  opacity: calc(--value(integer) * 1%);  opacity: --value(--opacity-*, [percentage]);}\n```\n#### [Negative values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#negative-values)\nTo support negative values, register separate positive and negative utilities into separate declarations:\n\nCSS\n```\n@utility inset-* {  inset: --spacing(--value(integer));  inset: --value([percentage], [length]);}@utility -inset-* {  inset: --spacing(--value(integer) * -1);  inset: calc(--value([percentage], [length]) * -1);}\n```\n#### [Modifiers](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#modifiers)\nModifiers are handled using the `--modifier()` function which works exactly like the `--value()` function but operates on a modifier if present:\n\nCSS\n```\n@utility text-* {  font-size: --value(--text-*, [length]);  line-height: --modifier(--leading-*, [length], [*]);}\n```\n\nIf a modifier isn't present, any declaration depending on a modifier is just not included in the output.\n\n#### [Fractions](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#fractions)\nTo handle fractions, we rely on the CSS `ratio` data type. If this is used with `--value()`, it's a signal to Tailwind to treat the value and modifier as a single value:\n\nCSS\n```\n@utility aspect-* {  aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);}\n```\n\nThis will match utilities like `aspect-square`, `aspect-3\/4`, and `aspect-[7\/9]`.\n\n## [Adding custom variants](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-custom-variants)\nIn addition to using the variants that ship with Tailwind, you can also add your own custom variants using the `@custom-variant` directive:\n```\n@custom-variant theme-midnight {  &:where([data-theme=\"midnight\"] *) {    @slot;  }}\n```\nNow you can use the `theme-midnight:<utility>` variant in your HTML:\n```\n<html data-theme=\"midnight\">  <button class=\"theme-midnight:bg-black ...\"><\/button><\/html>\n```\nYou can create variants using the shorthand syntax when nesting isn't required:\n```\n@custom-variant theme-midnight (&:where([data-theme=\"midnight\"] *));\n```\nWhen a custom variant has multiple rules, they can be nested within each other:\n```\n@custom-variant any-hover {  @media (any-hover: hover) {    &:hover {      @slot;    }  }}\n```\n\n[Colors](https:\/\/tailwindcss.com\/docs\/colors)\n\n[Detecting classes in source files](https:\/\/tailwindcss.com\/docs\/detecting-classes-in-source-files)\n\n### On this page\n- [Customizing your theme](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#customizing-your-theme)\n- [Using arbitrary values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-arbitrary-values)\n  - [Arbitrary properties](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#arbitrary-properties)\n  - [Arbitrary variants](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#arbitrary-variants)\n  - [Handling whitespace](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#handling-whitespace)\n  - [Resolving ambiguities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#resolving-ambiguities)\n- [Using custom CSS](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-custom-css)\n  - [Adding base styles](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-base-styles)\n  - [Adding component classes](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-component-classes)\n  - [Using variants](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-variants)\n- [Adding custom utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-custom-utilities)\n  - [Simple utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#simple-utilities)\n  - [Complex utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#complex-utilities)\n  - [Functional utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#functional-utilities)\n- [Adding custom variants](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-custom-variants)\n\n### Tailwind CSS\n- [Documentation](https:\/\/tailwindcss.com\/docs)\n- [Playground](https:\/\/play.tailwindcss.com\/)\n- [Blog](https:\/\/tailwindcss.com\/blog)\n- [Showcase](https:\/\/tailwindcss.com\/showcase)\n- [Sponsor](https:\/\/tailwindcss.com\/sponsor)\n\n### Resources\n- [Refactoring UI](https:\/\/www.refactoringui.com\/)\n- [Headless UI](https:\/\/headlessui.com\/)\n- [Heroicons](https:\/\/heroicons.com\/)\n- [Hero Patterns](https:\/\/heropatterns.com\/)\n\n### [Tailwind Plus](https:\/\/tailwindcss.com\/plus?ref=footer)\n- [UI Blocks](https:\/\/tailwindcss.com\/plus\/ui-blocks?ref=footer)\n- [Templates](https:\/\/tailwindcss.com\/plus\/templates?ref=footer)\n- [UI Kit](https:\/\/tailwindcss.com\/plus\/ui-kit?ref=footer)\n\n### Community\n- [GitHub](https:\/\/github.com\/tailwindlabs\/tailwindcss)\n- [Discord](https:\/\/tailwindcss.com\/sponsor#insiders)\n- [X](https:\/\/x.com\/tailwindcss)\n\n### Tailwind CSS\n- [Documentation](https:\/\/tailwindcss.com\/docs)\n- [Playground](https:\/\/play.tailwindcss.com\/)\n- [Blog](https:\/\/tailwindcss.com\/blog)\n- [Showcase](https:\/\/tailwindcss.com\/showcase)\n- [Sponsor](https:\/\/tailwindcss.com\/sponsor)\n\n### [Tailwind Plus](https:\/\/tailwindcss.com\/plus?ref=footer)\n- [UI Blocks](https:\/\/tailwindcss.com\/plus\/ui-blocks?ref=footer)\n- [Templates](https:\/\/tailwindcss.com\/plus\/templates?ref=footer)\n- [UI Kit](https:\/\/tailwindcss.com\/plus\/ui-kit?ref=footer)\n\n### Resources\n- [Refactoring UI](https:\/\/www.refactoringui.com\/)\n- [Headless UI](https:\/\/headlessui.com\/)\n- [Heroicons](https:\/\/heroicons.com\/)\n- [Hero Patterns](https:\/\/heropatterns.com\/)\n\n### Community\n- [GitHub](https:\/\/github.com\/tailwindlabs\/tailwindcss)\n- [Discord](https:\/\/tailwindcss.com\/sponsor#insiders)\n- [X](https:\/\/x.com\/tailwindcss)\n\nCopyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https:\/\/tailwindcss.com\/brand)","attrs_readable_markdown":"Best practices for adding your own custom styles in Tailwind projects.\n\nOften the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you.\n\nTailwind has been designed from the ground up to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework.\n\nThis guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins.\n\n## [Customizing your theme](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#customizing-your-theme)\nIf you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations using the `@theme` directive in your CSS:\n\nCSS\n```\n@theme {  --font-display: \"Satoshi\", \"sans-serif\";  --breakpoint-3xl: 120rem;  --color-avocado-100: oklch(0.99 0 0);  --color-avocado-200: oklch(0.98 0.04 113.22);  --color-avocado-300: oklch(0.94 0.11 115.03);  --color-avocado-400: oklch(0.92 0.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  \/* ... *\/}\n```\n\nLearn more about customizing your theme in the [theme variables documentation](https:\/\/tailwindcss.com\/docs\/theme).\n\n## [Using arbitrary values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-arbitrary-values)\nWhile you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect.\n\nWhen you find yourself really needing something like `top: 117px` to get a background image in just the right spot, use Tailwind's square bracket notation to generate a class on the fly with any arbitrary value:\n\nHTML\n```\n<div class=\"top-[117px]\">  <\/div>\n```\n\nThis is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like `hover` and responsive modifiers like `lg`:\n\nHTML\n```\n<div class=\"top-[117px] lg:top-[344px]\">  <\/div>\n```\n\nThis works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more:\n\nHTML\n```\n<div class=\"bg-[#bada55] text-[22px] before:content-['Festivus']\">  <\/div>\n```\n\nIf you're referencing a CSS variable as an arbitrary value, you can use the custom property syntax:\n\nHTML\n```\n<div class=\"fill-(--my-brand-color) ...\">  <\/div>\n```\n\nThis is just a shorthand for `fill-[var(--my-brand-color)]` that adds the `var()` function for you automatically.\n\n### [Arbitrary properties](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#arbitrary-properties)\nIf you ever need to use a CSS property that Tailwind doesn't include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS:\n\nHTML\n```\n<div class=\"[mask-type:luminance]\">  <\/div>\n```\n\nThis is *really* like inline styles, but again with the benefit that you can use modifiers:\n\nHTML\n```\n<div class=\"[mask-type:luminance] hover:[mask-type:alpha]\">  <\/div>\n```\n\nThis can be useful for things like CSS variables as well, especially when they need to change under different conditions:\n\nHTML\n```\n<div class=\"[--scroll-offset:56px] lg:[--scroll-offset:44px]\">  <\/div>\n```\n### [Arbitrary variants](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#arbitrary-variants)\nArbitrary *variants* are like arbitrary values but for doing on-the-fly selector modification, like you can with built-in pseudo-class variants like `hover:{utility}` or responsive variants like `md:{utility}` but using square bracket notation directly in your HTML.\n\nHTML\n```\n<ul role=\"list\">  {#each items as item}  <li class=\"lg:[&:nth-child(-n+3)]:hover:underline\">{item}<\/li>  {\/each}<\/ul>\n```\n\nLearn more in the [arbitrary variants](https:\/\/tailwindcss.com\/docs\/hover-focus-and-other-states#using-arbitrary-variants) documentation.\n\n### [Handling whitespace](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#handling-whitespace)\nWhen an arbitrary value needs to contain a space, use an underscore (`_`) instead and Tailwind will automatically convert it to a space at build-time:\n\nHTML\n```\n<div class=\"grid grid-cols-[1fr_500px_2fr]\">  <\/div>\n```\n\nIn situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:\n\nHTML\n```\n<div class=\"bg-[url('\/what_a_rush.png')]\">  <\/div>\n```\n\nIn the rare case that you actually need to use an underscore but it's ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won't convert it to a space:\n\nHTML\n```\n<div class=\"before:content-['hello\\_world']\">  <\/div>\n```\n\nIf you're using something like JSX where the backslash is stripped from the rendered HTML, use [String.raw()](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/raw) so the backslash isn't treated as a JavaScript escape character:\n```\n<div className={String.raw`before:content-['hello\\_world']`}>  <\/div>\n```\n### [Resolving ambiguities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#resolving-ambiguities)\nMany utilities in Tailwind share a common namespace but map to different CSS properties. For example `text-lg` and `text-black` both share the `text-` namespace, but one is for `font-size` and the other is for `color`.\n\nWhen using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in:\n\nHTML\n```\n<div class=\"text-[22px]\">...<\/div><div class=\"text-[#bada55]\">...<\/div>\n```\n\nSometimes it really is ambiguous though, for example when using CSS variables:\n\nHTML\n```\n<div class=\"text-(--my-var)\">...<\/div>\n```\n\nIn these situations, you can \"hint\" the underlying type to Tailwind by adding a [CSS data type](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Types) before the value:\n\nHTML\n```\n<div class=\"text-(length:--my-var)\">...<\/div><div class=\"text-(color:--my-var)\">...<\/div>\n```\n## [Using custom CSS](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-custom-css)\nWhile Tailwind is designed to handle the bulk of your styling needs, there is nothing stopping you from just writing plain CSS when you need to:\n\nCSS\n```\n@import \"tailwindcss\";.my-custom-style {  \/* ... *\/}\n```\n### [Adding base styles](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-base-styles)\nIf you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the `html` or `body` elements:\n\nHTML\n```\n<!doctype html><html lang=\"en\" class=\"bg-gray-100 font-serif text-gray-900\">  <\/html>\n```\n\nThis keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file.\n\nIf you want to add your own default base styles for specific HTML elements, use the `@layer` directive to add those styles to Tailwind's `base` layer:\n\nCSS\n```\n@layer base {  h1 {    font-size: var(--text-2xl);  }  h2 {    font-size: var(--text-xl);  }}\n```\n### [Adding component classes](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-component-classes)\nUse the `components` layer for any more complicated classes you want to add to your project that you'd still like to be able to override with utility classes.\n\nTraditionally these would be classes like `card`, `btn`, `badge` — that kind of thing.\n\nCSS\n```\n@layer components {  .card {    background-color: var(--color-white);    border-radius: var(--radius-lg);    padding: --spacing(6);    box-shadow: var(--shadow-xl);  }}\n```\n\nBy defining component classes in the `components` layer, you can still use utility classes to override them when necessary:\n\nHTML\n```\n<div class=\"card rounded-none\">  <\/div>\n```\n\nUsing Tailwind you probably don't need these types of classes as often as you think. Read our guide on [managing duplication](https:\/\/tailwindcss.com\/docs\/styling-with-utility-classes#managing-duplication) for our recommendations.\n\nThe `components` layer is also a good place to put custom styles for any third-party components you're using:\n\nCSS\n```\n@layer components {  .select2-dropdown {    \/* ... *\/  }}\n```\n### [Using variants](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#using-variants)\nUse the `@variant` directive to apply a Tailwind variant within custom CSS:\n\napp.css\n```\n.my-element {  background: white;  @variant dark {    background: black;  }}\n```\n\nCompiled CSS\n```\n.my-element {  background: white;  @media (prefers-color-scheme: dark) {    background: black;  }}\n```\n\nIf you need to apply multiple variants at the same time, use nesting:\n\napp.css\n```\n.my-element {  background: white;  @variant dark {    @variant hover {      background: black;    }  }}\n```\n\nCompiled CSS\n```\n.my-element {  background: white;  @media (prefers-color-scheme: dark) {    &:hover {      @media (hover: hover) {        background: black;      }    }  }}\n```\n## [Adding custom utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-custom-utilities)\n### [Simple utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#simple-utilities)\nIn addition to using the utilities that ship with Tailwind, you can also add your own custom utilities. This can be useful when there's a CSS feature you'd like to use in your project that Tailwind doesn't include utilities for out of the box.\n\nUse the `@utility` directive to add a custom utility to your project:\n\nCSS\n```\n@utility content-auto {  content-visibility: auto;}\n```\n\nYou can now use this utility in your HTML:\n\nHTML\n```\n<div class=\"content-auto\">  <\/div>\n```\n\nIt will also work with variants like `hover`, `focus` and `lg`:\n\nHTML\n```\n<div class=\"hover:content-auto\">  <\/div>\n```\n\nCustom utilities are automatically inserted into the `utilities` layer along with all of the built-in utilities in the framework.\n\n### [Complex utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#complex-utilities)\nIf your custom utility is more complex than a single class name, use nesting to define the utility:\n\nCSS\n```\n@utility scrollbar-hidden {  &::-webkit-scrollbar {    display: none;  }}\n```\n### [Functional utilities](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#functional-utilities)\nIn addition to registering simple utilities with the `@utility` directive, you can also register functional utilities that accept an argument:\n\nCSS\n```\n@utility tab-* {  tab-size: --value(--tab-size-*);}\n```\n\nThe special `--value()` function is used to resolve the utility value.\n\n#### [Matching theme values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#matching-theme-values)\nUse the `--value(--theme-key-*)` syntax to resolve the utility value against a set of theme keys:\n\nCSS\n```\n@theme {  --tab-size-2: 2;  --tab-size-4: 4;  --tab-size-github: 8;}@utility tab-* {  tab-size: --value(--tab-size-*);}\n```\n\nThis will match utilities like `tab-2`, `tab-4`, and `tab-github`.\n\n#### [Bare values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#bare-values)\nTo resolve the value as a bare value, use the `--value({type})` syntax, where `{type}` is the data type you want to validate the bare value as:\n\nCSS\n```\n@utility tab-* {  tab-size: --value(integer);}\n```\n\nThis will match utilities like `tab-1` and `tab-76`.\n\nAvailable bare value data types are: `number`, `integer`, `ratio`, and `percentage`.\n\n#### [Literal values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#literal-values)\nTo support literal values, use the `--value('literal')` syntax (notice the quotes):\n\nCSS\n```\n@utility tab-* {  tab-size: --value(\"inherit\", \"initial\", \"unset\");}\n```\n\nThis will match utilities like `tab-inherit`, `tab-initial`, and `tab-unset`.\n\n#### [Arbitrary values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#arbitrary-values)\nTo support arbitrary values, use the `--value([{type}])` syntax (notice the square brackets) to tell Tailwind which types are supported as an arbitrary value:\n\nCSS\n```\n@utility tab-* {  tab-size: --value([integer]);}\n```\n\nThis will match utilities like `tab-[1]` and `tab-[76]`.\n\nAvailable arbitrary value data types are: `absolute-size`, `angle`, `bg-size`, `color`, `family-name`, `generic-name`, `image`, `integer`, `length`, `line-width`, `number`, `percentage`, `position`, `ratio`, `relative-size`, `url`, `vector`, and `*`.\n\n#### [Supporting theme, bare, and arbitrary values together](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#supporting-theme-bare-and-arbitrary-values-together)\nAll three forms of the `--value()` function can be used within a rule as multiple declarations, and any declarations that fail to resolve will be omitted in the output:\n\nCSS\n```\n@theme {  --tab-size-github: 8;}@utility tab-* {  tab-size: --value([integer]);  tab-size: --value(integer);  tab-size: --value(--tab-size-*);}\n```\n\nThis makes it possible to treat the value differently in each case if necessary, for example translating a bare integer to a percentage:\n\nCSS\n```\n@utility opacity-* {  opacity: --value([percentage]);  opacity: calc(--value(integer) * 1%);  opacity: --value(--opacity-*);}\n```\n\nThe `--value()` function can also take multiple arguments and resolve them left to right if you don't need to treat the return value differently in different cases:\n\nCSS\n```\n@theme {  --tab-size-github: 8;}@utility tab-* {  tab-size: --value(--tab-size-*, integer, [integer]);}@utility opacity-* {  opacity: calc(--value(integer) * 1%);  opacity: --value(--opacity-*, [percentage]);}\n```\n#### [Negative values](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#negative-values)\nTo support negative values, register separate positive and negative utilities into separate declarations:\n\nCSS\n```\n@utility inset-* {  inset: --spacing(--value(integer));  inset: --value([percentage], [length]);}@utility -inset-* {  inset: --spacing(--value(integer) * -1);  inset: calc(--value([percentage], [length]) * -1);}\n```\n#### [Modifiers](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#modifiers)\nModifiers are handled using the `--modifier()` function which works exactly like the `--value()` function but operates on a modifier if present:\n\nCSS\n```\n@utility text-* {  font-size: --value(--text-*, [length]);  line-height: --modifier(--leading-*, [length], [*]);}\n```\n\nIf a modifier isn't present, any declaration depending on a modifier is just not included in the output.\n\n#### [Fractions](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#fractions)\nTo handle fractions, we rely on the CSS `ratio` data type. If this is used with `--value()`, it's a signal to Tailwind to treat the value and modifier as a single value:\n\nCSS\n```\n@utility aspect-* {  aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);}\n```\n\nThis will match utilities like `aspect-square`, `aspect-3\/4`, and `aspect-[7\/9]`.\n\n## [Adding custom variants](https:\/\/tailwindcss.com\/docs\/adding-custom-styles#adding-custom-variants)\nIn addition to using the variants that ship with Tailwind, you can also add your own custom variants using the `@custom-variant` directive:\n```\n@custom-variant theme-midnight {  &:where([data-theme=\"midnight\"] *) {    @slot;  }}\n```\nNow you can use the `theme-midnight:<utility>` variant in your HTML:\n```\n<html data-theme=\"midnight\">  <button class=\"theme-midnight:bg-black ...\"><\/button><\/html>\n```\nYou can create variants using the shorthand syntax when nesting isn't required:\n```\n@custom-variant theme-midnight (&:where([data-theme=\"midnight\"] *));\n```\nWhen a custom variant has multiple rules, they can be nested within each other:\n```\n@custom-variant any-hover {  @media (any-hover: hover) {    &:hover {      @slot;    }  }}\n```","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

5 days ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.2 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://tailwindcss.com/docs/adding-custom-styles
Last Crawled	2026-04-16 00:41:10 (5 days ago)
First Indexed	2021-12-09 18:35:37 (4 years ago)
HTTP Status Code	200
Meta Title	Adding custom styles - Core concepts - Tailwind CSS
Meta Description	Best practices for adding your own custom styles in Tailwind projects.
Meta Canonical	null
Boilerpipe Text	Best practices for adding your own custom styles in Tailwind projects. Often the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you. Tailwind has been designed from the ground up to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework. This guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins. Customizing your theme If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations using the @theme directive in your CSS: CSS @theme { --font-display : "Satoshi" , "sans-serif" ; --breakpoint-3xl : 120 rem ; --color-avocado-100 : oklch ( 0.99 0 0 ); --color-avocado-200 : oklch ( 0.98 0.04 113.22 ); --color-avocado-300 : oklch ( 0.94 0.11 115.03 ); --color-avocado-400 : oklch ( 0.92 0.19 114.08 ); --color-avocado-500 : oklch ( 0.84 0.18 117.33 ); --color-avocado-600 : oklch ( 0.53 0.12 118.34 ); --ease-fluid : cubic-bezier ( 0.3 , 0 , 0 , 1 ); --ease-snappy : cubic-bezier ( 0.2 , 0 , 0 , 1 ); /* ... / } Learn more about customizing your theme in the theme variables documentation . Using arbitrary values While you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect. When you find yourself really needing something like top: 117px to get a background image in just the right spot, use Tailwind's square bracket notation to generate a class on the fly with any arbitrary value: HTML < div class = " top-[117px] " > <!-- ... --> </ div > This is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like hover and responsive modifiers like lg : HTML < div class = " top-[117px] lg:top-[344px] " > <!-- ... --> </ div > This works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more: HTML < div class = " bg-[#bada55] text-[22px] before:content-['Festivus'] " > <!-- ... --> </ div > If you're referencing a CSS variable as an arbitrary value, you can use the custom property syntax: HTML < div class = " fill-(--my-brand-color) ..." > <!-- ... --> </ div > This is just a shorthand for fill-[var(--my-brand-color)] that adds the var() function for you automatically. Arbitrary properties If you ever need to use a CSS property that Tailwind doesn't include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS: HTML < div class = " [mask-type:luminance] " > <!-- ... --> </ div > This is really like inline styles, but again with the benefit that you can use modifiers: HTML < div class = " [mask-type:luminance] hover:[mask-type:alpha] " > <!-- ... --> </ div > This can be useful for things like CSS variables as well, especially when they need to change under different conditions: HTML < div class = " [--scroll-offset:56px] lg:[--scroll-offset:44px] " > <!-- ... --> </ div > Arbitrary variants Arbitrary variants are like arbitrary values but for doing on-the-fly selector modification, like you can with built-in pseudo-class variants like hover:{utility} or responsive variants like md:{utility} but using square bracket notation directly in your HTML. HTML < ul role = "list" > {#each items as item} < li class = "lg: [&:nth-child(-n+3)] :hover:underline" > {item} </ li > {/each} </ ul > Learn more in the arbitrary variants documentation. Handling whitespace When an arbitrary value needs to contain a space, use an underscore ( _ ) instead and Tailwind will automatically convert it to a space at build-time: HTML < div class = "grid grid-cols-[1fr_500px_2fr] " > <!-- ... --> </ div > In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs: HTML < div class = " bg-[url('/what_a_rush.png')] " > <!-- ... --> </ div > In the rare case that you actually need to use an underscore but it's ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won't convert it to a space: HTML < div class = " before:content-['hello\_world'] " > <!-- ... --> </ div > If you're using something like JSX where the backslash is stripped from the rendered HTML, use String.raw() so the backslash isn't treated as a JavaScript escape character: < div className ={ String . raw `before:content-['hello \_ world']` }> <!-- ... --> </ div > Resolving ambiguities Many utilities in Tailwind share a common namespace but map to different CSS properties. For example text-lg and text-black both share the text- namespace, but one is for font-size and the other is for color . When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in: HTML <!-- Will generate a font-size utility --> < div class = " text-[22px] " > ... </ div > <!-- Will generate a color utility --> < div class = " text-[#bada55] " > ... </ div > Sometimes it really is ambiguous though, for example when using CSS variables: HTML < div class = " text-(--my-var) " > ... </ div > In these situations, you can "hint" the underlying type to Tailwind by adding a CSS data type before the value: HTML <!-- Will generate a font-size utility --> < div class = " text-(length:--my-var) " > ... </ div > <!-- Will generate a color utility --> < div class = " text-(color:--my-var) " > ... </ div > Using custom CSS While Tailwind is designed to handle the bulk of your styling needs, there is nothing stopping you from just writing plain CSS when you need to: CSS @import "tailwindcss" ; .my-custom-style { / ... / } Adding base styles If you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the html or body elements: HTML <! doctype html > < html lang = "en" class = " bg-gray-100 font-serif text-gray-900 " > <!-- ... --> </ html > This keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file. If you want to add your own default base styles for specific HTML elements, use the @layer directive to add those styles to Tailwind's base layer: CSS @layer base { h1 { font-size : var ( --text-2xl ); } h2 { font-size : var ( --text-xl ); } } Adding component classes Use the components layer for any more complicated classes you want to add to your project that you'd still like to be able to override with utility classes. Traditionally these would be classes like card , btn , badge — that kind of thing. CSS @layer components { .card { background-color : var ( --color-white ); border-radius : var ( --radius-lg ); padding : --spacing(6 ); box-shadow : var ( --shadow-xl ); } } By defining component classes in the components layer, you can still use utility classes to override them when necessary: HTML <!-- Will look like a card, but with square corners --> < div class = " card rounded-none " > <!-- ... --> </ div > Using Tailwind you probably don't need these types of classes as often as you think. Read our guide on managing duplication for our recommendations. The components layer is also a good place to put custom styles for any third-party components you're using: CSS @layer components { .select2-dropdown { / ... / } } Using variants Use the @variant directive to apply a Tailwind variant within custom CSS: app.css .my-element { background : white ; @variant dark { background: black; } } Compiled CSS .my-element { background : white ; @ media ( prefers-color-scheme : dark ) { background : black ; } } If you need to apply multiple variants at the same time, use nesting: app.css .my-element { background : white ; @variant dark { @variant hover { background: black; } } } Compiled CSS .my-element { background : white ; @ media ( prefers-color-scheme : dark ) { &: hover { @media (hover: hover ) { background : black ; } } } } Adding custom utilities Simple utilities In addition to using the utilities that ship with Tailwind, you can also add your own custom utilities. This can be useful when there's a CSS feature you'd like to use in your project that Tailwind doesn't include utilities for out of the box. Use the @utility directive to add a custom utility to your project: CSS @utility content-auto { content-visibility: auto; } You can now use this utility in your HTML: HTML < div class = " content-auto " > <!-- ... --> </ div > It will also work with variants like hover , focus and lg : HTML < div class = " hover:content-auto " > <!-- ... --> </ div > Custom utilities are automatically inserted into the utilities layer along with all of the built-in utilities in the framework. Complex utilities If your custom utility is more complex than a single class name, use nesting to define the utility: CSS @utility scrollbar-hidden { &::-webkit-scrollbar { display : none ; } } Functional utilities In addition to registering simple utilities with the @utility directive, you can also register functional utilities that accept an argument: CSS @utility tab- { tab-size: --value(--tab-size-); } The special --value() function is used to resolve the utility value. Matching theme values Use the --value(--theme-key-) syntax to resolve the utility value against a set of theme keys: CSS @theme { --tab-size-2 : 2 ; --tab-size-4 : 4 ; --tab-size-github : 8 ; } @utility tab-* { tab-size: --value(--tab-size-); } This will match utilities like tab-2 , tab-4 , and tab-github . Bare values To resolve the value as a bare value, use the --value({type}) syntax, where {type} is the data type you want to validate the bare value as: CSS @utility tab- { tab-size: --value(integer); } This will match utilities like tab-1 and tab-76 . Available bare value data types are: number , integer , ratio , and percentage . Literal values To support literal values, use the --value('literal') syntax (notice the quotes): CSS @utility tab-* { tab-size: --value("inherit", "initial", "unset"); } This will match utilities like tab-inherit , tab-initial , and tab-unset . Arbitrary values To support arbitrary values, use the --value([{type}]) syntax (notice the square brackets) to tell Tailwind which types are supported as an arbitrary value: CSS @utility tab-* { tab-size: --value([integer]); } This will match utilities like tab-[1] and tab-[76] . Available arbitrary value data types are: absolute-size , angle , bg-size , color , family-name , generic-name , image , integer , length , line-width , number , percentage , position , ratio , relative-size , url , vector , and * . Supporting theme, bare, and arbitrary values together All three forms of the --value() function can be used within a rule as multiple declarations, and any declarations that fail to resolve will be omitted in the output: CSS @theme { --tab-size-github : 8 ; } @utility tab-* { tab-size: --value([integer]); tab-size: --value(integer); tab-size: --value(--tab-size-); } This makes it possible to treat the value differently in each case if necessary, for example translating a bare integer to a percentage: CSS @utility opacity- { opacity: --value([percentage]); opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-); } The --value() function can also take multiple arguments and resolve them left to right if you don't need to treat the return value differently in different cases: CSS @theme { --tab-size-github : 8 ; } @utility tab- { tab-size: --value(--tab-size-, integer, [integer]); } @utility opacity- { opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-, [percentage]); } Negative values To support negative values, register separate positive and negative utilities into separate declarations: CSS @utility inset- { inset: --spacing(--value(integer)); inset: --value([percentage], [length]); } @utility -inset-* { inset: --spacing(--value(integer) * -1); inset: calc(--value([percentage], [length]) * -1); } Modifiers Modifiers are handled using the --modifier() function which works exactly like the --value() function but operates on a modifier if present: CSS @utility text-* { font-size: --value(--text-, [length]); line-height: --modifier(--leading-, [length], []); } If a modifier isn't present, any declaration depending on a modifier is just not included in the output. Fractions To handle fractions, we rely on the CSS ratio data type. If this is used with --value() , it's a signal to Tailwind to treat the value and modifier as a single value: CSS @utility aspect- { aspect-ratio: --value(--aspect-ratio-, ratio, [ratio] ); } This will match utilities like aspect-square , aspect-3/4 , and aspect-[7/9] . Adding custom variants In addition to using the variants that ship with Tailwind, you can also add your own custom variants using the @custom-variant directive: @custom-variant theme-midnight { & :where ( [ data-theme = " midnight " ] ) { @ slot ; } } Now you can use the theme-midnight: <utility> variant in your HTML: < html data-theme = "midnight" > < button class = " theme-midnight:bg-black ..." ></ button > </ html > You can create variants using the shorthand syntax when nesting isn't required: @custom-variant theme-midnight (&:where([data-theme="midnight"] *)) ; When a custom variant has multiple rules, they can be nested within each other: @custom-variant any-hover { @media ( any-hover : hover ) { & :hover { @ slot ; } } }
Markdown	v4.2 `⌘K``Ctrl K` [Docs](https://tailwindcss.com/docs)[Blog](https://tailwindcss.com/blog)[Showcase](https://tailwindcss.com/showcase)[Sponsor](https://tailwindcss.com/sponsor) [Plus](https://tailwindcss.com/plus?ref=top) 1. Core concepts 2. Adding custom styles - [Documentation](https://tailwindcss.com/docs/installation) - [Components](https://tailwindcss.com/plus/ui-blocks?ref=sidebar) - [Templates](https://tailwindcss.com/plus/templates?ref=sidebar) - [UI Kit](https://tailwindcss.com/plus/ui-kit?ref=sidebar) - [Playground](https://play.tailwindcss.com/) - [CourseNew](https://tailwindcss.com/build-uis-that-dont-suck) - [Community](https://tailwindcss.com/insiders) ### Getting started - [Installation](https://tailwindcss.com/docs/installation) - [Editor setup](https://tailwindcss.com/docs/editor-setup) - [Compatibility](https://tailwindcss.com/docs/compatibility) - [Upgrade guide](https://tailwindcss.com/docs/upgrade-guide) ### Core concepts - [Styling with utility classes](https://tailwindcss.com/docs/styling-with-utility-classes) - [Hover, focus, and other states](https://tailwindcss.com/docs/hover-focus-and-other-states) - [Responsive design](https://tailwindcss.com/docs/responsive-design) - [Dark mode](https://tailwindcss.com/docs/dark-mode) - [Theme variables](https://tailwindcss.com/docs/theme) - [Colors](https://tailwindcss.com/docs/colors) - [Adding custom styles](https://tailwindcss.com/docs/adding-custom-styles) - [Detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files) - [Functions and directives](https://tailwindcss.com/docs/functions-and-directives) ### Base styles - [Preflight](https://tailwindcss.com/docs/preflight) ### Layout - [aspect-ratio](https://tailwindcss.com/docs/aspect-ratio) - [columns](https://tailwindcss.com/docs/columns) - [break-after](https://tailwindcss.com/docs/break-after) - [break-before](https://tailwindcss.com/docs/break-before) - [break-inside](https://tailwindcss.com/docs/break-inside) - [box-decoration-break](https://tailwindcss.com/docs/box-decoration-break) - [box-sizing](https://tailwindcss.com/docs/box-sizing) - [display](https://tailwindcss.com/docs/display) - [float](https://tailwindcss.com/docs/float) - [clear](https://tailwindcss.com/docs/clear) - [isolation](https://tailwindcss.com/docs/isolation) - [object-fit](https://tailwindcss.com/docs/object-fit) - [object-position](https://tailwindcss.com/docs/object-position) - [overflow](https://tailwindcss.com/docs/overflow) - [overscroll-behavior](https://tailwindcss.com/docs/overscroll-behavior) - [position](https://tailwindcss.com/docs/position) - [top / right / bottom / left](https://tailwindcss.com/docs/top-right-bottom-left) - [visibility](https://tailwindcss.com/docs/visibility) - [z-index](https://tailwindcss.com/docs/z-index) ### Flexbox & Grid - [flex-basis](https://tailwindcss.com/docs/flex-basis) - [flex-direction](https://tailwindcss.com/docs/flex-direction) - [flex-wrap](https://tailwindcss.com/docs/flex-wrap) - [flex](https://tailwindcss.com/docs/flex) - [flex-grow](https://tailwindcss.com/docs/flex-grow) - [flex-shrink](https://tailwindcss.com/docs/flex-shrink) - [order](https://tailwindcss.com/docs/order) - [grid-template-columns](https://tailwindcss.com/docs/grid-template-columns) - [grid-column](https://tailwindcss.com/docs/grid-column) - [grid-template-rows](https://tailwindcss.com/docs/grid-template-rows) - [grid-row](https://tailwindcss.com/docs/grid-row) - [grid-auto-flow](https://tailwindcss.com/docs/grid-auto-flow) - [grid-auto-columns](https://tailwindcss.com/docs/grid-auto-columns) - [grid-auto-rows](https://tailwindcss.com/docs/grid-auto-rows) - [gap](https://tailwindcss.com/docs/gap) - [justify-content](https://tailwindcss.com/docs/justify-content) - [justify-items](https://tailwindcss.com/docs/justify-items) - [justify-self](https://tailwindcss.com/docs/justify-self) - [align-content](https://tailwindcss.com/docs/align-content) - [align-items](https://tailwindcss.com/docs/align-items) - [align-self](https://tailwindcss.com/docs/align-self) - [place-content](https://tailwindcss.com/docs/place-content) - [place-items](https://tailwindcss.com/docs/place-items) - [place-self](https://tailwindcss.com/docs/place-self) ### Spacing - [padding](https://tailwindcss.com/docs/padding) - [margin](https://tailwindcss.com/docs/margin) ### Sizing - [width](https://tailwindcss.com/docs/width) - [min-width](https://tailwindcss.com/docs/min-width) - [max-width](https://tailwindcss.com/docs/max-width) - [height](https://tailwindcss.com/docs/height) - [min-height](https://tailwindcss.com/docs/min-height) - [max-height](https://tailwindcss.com/docs/max-height) - [inline-size](https://tailwindcss.com/docs/inline-size) - [min-inline-size](https://tailwindcss.com/docs/min-inline-size) - [max-inline-size](https://tailwindcss.com/docs/max-inline-size) - [block-size](https://tailwindcss.com/docs/block-size) - [min-block-size](https://tailwindcss.com/docs/min-block-size) - [max-block-size](https://tailwindcss.com/docs/max-block-size) ### Typography - [font-family](https://tailwindcss.com/docs/font-family) - [font-size](https://tailwindcss.com/docs/font-size) - [font-smoothing](https://tailwindcss.com/docs/font-smoothing) - [font-style](https://tailwindcss.com/docs/font-style) - [font-weight](https://tailwindcss.com/docs/font-weight) - [font-stretch](https://tailwindcss.com/docs/font-stretch) - [font-variant-numeric](https://tailwindcss.com/docs/font-variant-numeric) - [font-feature-settings](https://tailwindcss.com/docs/font-feature-settings) - [letter-spacing](https://tailwindcss.com/docs/letter-spacing) - [line-clamp](https://tailwindcss.com/docs/line-clamp) - [line-height](https://tailwindcss.com/docs/line-height) - [list-style-image](https://tailwindcss.com/docs/list-style-image) - [list-style-position](https://tailwindcss.com/docs/list-style-position) - [list-style-type](https://tailwindcss.com/docs/list-style-type) - [text-align](https://tailwindcss.com/docs/text-align) - [color](https://tailwindcss.com/docs/color) - [text-decoration-line](https://tailwindcss.com/docs/text-decoration-line) - [text-decoration-color](https://tailwindcss.com/docs/text-decoration-color) - [text-decoration-style](https://tailwindcss.com/docs/text-decoration-style) - [text-decoration-thickness](https://tailwindcss.com/docs/text-decoration-thickness) - [text-underline-offset](https://tailwindcss.com/docs/text-underline-offset) - [text-transform](https://tailwindcss.com/docs/text-transform) - [text-overflow](https://tailwindcss.com/docs/text-overflow) - [text-wrap](https://tailwindcss.com/docs/text-wrap) - [text-indent](https://tailwindcss.com/docs/text-indent) - [vertical-align](https://tailwindcss.com/docs/vertical-align) - [white-space](https://tailwindcss.com/docs/white-space) - [word-break](https://tailwindcss.com/docs/word-break) - [overflow-wrap](https://tailwindcss.com/docs/overflow-wrap) - [hyphens](https://tailwindcss.com/docs/hyphens) - [content](https://tailwindcss.com/docs/content) ### Backgrounds - [background-attachment](https://tailwindcss.com/docs/background-attachment) - [background-clip](https://tailwindcss.com/docs/background-clip) - [background-color](https://tailwindcss.com/docs/background-color) - [background-image](https://tailwindcss.com/docs/background-image) - [background-origin](https://tailwindcss.com/docs/background-origin) - [background-position](https://tailwindcss.com/docs/background-position) - [background-repeat](https://tailwindcss.com/docs/background-repeat) - [background-size](https://tailwindcss.com/docs/background-size) ### Borders - [border-radius](https://tailwindcss.com/docs/border-radius) - [border-width](https://tailwindcss.com/docs/border-width) - [border-color](https://tailwindcss.com/docs/border-color) - [border-style](https://tailwindcss.com/docs/border-style) - [outline-width](https://tailwindcss.com/docs/outline-width) - [outline-color](https://tailwindcss.com/docs/outline-color) - [outline-style](https://tailwindcss.com/docs/outline-style) - [outline-offset](https://tailwindcss.com/docs/outline-offset) ### Effects - [box-shadow](https://tailwindcss.com/docs/box-shadow) - [text-shadow](https://tailwindcss.com/docs/text-shadow) - [opacity](https://tailwindcss.com/docs/opacity) - [mix-blend-mode](https://tailwindcss.com/docs/mix-blend-mode) - [background-blend-mode](https://tailwindcss.com/docs/background-blend-mode) - [mask-clip](https://tailwindcss.com/docs/mask-clip) - [mask-composite](https://tailwindcss.com/docs/mask-composite) - [mask-image](https://tailwindcss.com/docs/mask-image) - [mask-mode](https://tailwindcss.com/docs/mask-mode) - [mask-origin](https://tailwindcss.com/docs/mask-origin) - [mask-position](https://tailwindcss.com/docs/mask-position) - [mask-repeat](https://tailwindcss.com/docs/mask-repeat) - [mask-size](https://tailwindcss.com/docs/mask-size) - [mask-type](https://tailwindcss.com/docs/mask-type) ### Filters - [filter](https://tailwindcss.com/docs/filter) - [blur](https://tailwindcss.com/docs/filter-blur) - [brightness](https://tailwindcss.com/docs/filter-brightness) - [contrast](https://tailwindcss.com/docs/filter-contrast) - [drop-shadow](https://tailwindcss.com/docs/filter-drop-shadow) - [grayscale](https://tailwindcss.com/docs/filter-grayscale) - [hue-rotate](https://tailwindcss.com/docs/filter-hue-rotate) - [invert](https://tailwindcss.com/docs/filter-invert) - [saturate](https://tailwindcss.com/docs/filter-saturate) - [sepia](https://tailwindcss.com/docs/filter-sepia) - [backdrop-filter](https://tailwindcss.com/docs/backdrop-filter) - [blur](https://tailwindcss.com/docs/backdrop-filter-blur) - [brightness](https://tailwindcss.com/docs/backdrop-filter-brightness) - [contrast](https://tailwindcss.com/docs/backdrop-filter-contrast) - [grayscale](https://tailwindcss.com/docs/backdrop-filter-grayscale) - [hue-rotate](https://tailwindcss.com/docs/backdrop-filter-hue-rotate) - [invert](https://tailwindcss.com/docs/backdrop-filter-invert) - [opacity](https://tailwindcss.com/docs/backdrop-filter-opacity) - [saturate](https://tailwindcss.com/docs/backdrop-filter-saturate) - [sepia](https://tailwindcss.com/docs/backdrop-filter-sepia) ### Tables - [border-collapse](https://tailwindcss.com/docs/border-collapse) - [border-spacing](https://tailwindcss.com/docs/border-spacing) - [table-layout](https://tailwindcss.com/docs/table-layout) - [caption-side](https://tailwindcss.com/docs/caption-side) ### Transitions & Animation - [transition-property](https://tailwindcss.com/docs/transition-property) - [transition-behavior](https://tailwindcss.com/docs/transition-behavior) - [transition-duration](https://tailwindcss.com/docs/transition-duration) - [transition-timing-function](https://tailwindcss.com/docs/transition-timing-function) - [transition-delay](https://tailwindcss.com/docs/transition-delay) - [animation](https://tailwindcss.com/docs/animation) ### Transforms - [backface-visibility](https://tailwindcss.com/docs/backface-visibility) - [perspective](https://tailwindcss.com/docs/perspective) - [perspective-origin](https://tailwindcss.com/docs/perspective-origin) - [rotate](https://tailwindcss.com/docs/rotate) - [scale](https://tailwindcss.com/docs/scale) - [skew](https://tailwindcss.com/docs/skew) - [transform](https://tailwindcss.com/docs/transform) - [transform-origin](https://tailwindcss.com/docs/transform-origin) - [transform-style](https://tailwindcss.com/docs/transform-style) - [translate](https://tailwindcss.com/docs/translate) ### Interactivity - [accent-color](https://tailwindcss.com/docs/accent-color) - [appearance](https://tailwindcss.com/docs/appearance) - [caret-color](https://tailwindcss.com/docs/caret-color) - [color-scheme](https://tailwindcss.com/docs/color-scheme) - [cursor](https://tailwindcss.com/docs/cursor) - [field-sizing](https://tailwindcss.com/docs/field-sizing) - [pointer-events](https://tailwindcss.com/docs/pointer-events) - [resize](https://tailwindcss.com/docs/resize) - [scroll-behavior](https://tailwindcss.com/docs/scroll-behavior) - [scroll-margin](https://tailwindcss.com/docs/scroll-margin) - [scroll-padding](https://tailwindcss.com/docs/scroll-padding) - [scroll-snap-align](https://tailwindcss.com/docs/scroll-snap-align) - [scroll-snap-stop](https://tailwindcss.com/docs/scroll-snap-stop) - [scroll-snap-type](https://tailwindcss.com/docs/scroll-snap-type) - [touch-action](https://tailwindcss.com/docs/touch-action) - [user-select](https://tailwindcss.com/docs/user-select) - [will-change](https://tailwindcss.com/docs/will-change) ### SVG - [fill](https://tailwindcss.com/docs/fill) - [stroke](https://tailwindcss.com/docs/stroke) - [stroke-width](https://tailwindcss.com/docs/stroke-width) ### Accessibility - [forced-color-adjust](https://tailwindcss.com/docs/forced-color-adjust) Core concepts # Adding custom styles Best practices for adding your own custom styles in Tailwind projects. Often the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you. Tailwind has been designed from the ground up to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework. This guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins. ## [Customizing your theme](https://tailwindcss.com/docs/adding-custom-styles#customizing-your-theme) If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations using the `@theme` directive in your CSS: CSS ``` @theme { --font-display: "Satoshi", "sans-serif"; --breakpoint-3xl: 120rem; --color-avocado-100: oklch(0.99 0 0); --color-avocado-200: oklch(0.98 0.04 113.22); --color-avocado-300: oklch(0.94 0.11 115.03); --color-avocado-400: oklch(0.92 0.19 114.08); --color-avocado-500: oklch(0.84 0.18 117.33); --color-avocado-600: oklch(0.53 0.12 118.34); --ease-fluid: cubic-bezier(0.3, 0, 0, 1); --ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* ... /} ``` Learn more about customizing your theme in the [theme variables documentation](https://tailwindcss.com/docs/theme). ## [Using arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) While you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect. When you find yourself really needing something like `top: 117px` to get a background image in just the right spot, use Tailwind's square bracket notation to generate a class on the fly with any arbitrary value: HTML ``` <div class="top-[117px]"> <!-- ... --></div> ``` This is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like `hover` and responsive modifiers like `lg`: HTML ``` <div class="top-[117px] lg:top-[344px]"> <!-- ... --></div> ``` This works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more: HTML ``` <div class="bg-[#bada55] text-[22px] before:content-['Festivus']"> <!-- ... --></div> ``` If you're referencing a CSS variable as an arbitrary value, you can use the custom property syntax: HTML ``` <div class="fill-(--my-brand-color) ..."> <!-- ... --></div> ``` This is just a shorthand for `fill-[var(--my-brand-color)]` that adds the `var()` function for you automatically. ### [Arbitrary properties](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties) If you ever need to use a CSS property that Tailwind doesn't include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS: HTML ``` <div class="[mask-type:luminance]"> <!-- ... --></div> ``` This is really* like inline styles, but again with the benefit that you can use modifiers: HTML ``` <div class="[mask-type:luminance] hover:[mask-type:alpha]"> <!-- ... --></div> ``` This can be useful for things like CSS variables as well, especially when they need to change under different conditions: HTML ``` <div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]"> <!-- ... --></div> ``` ### [Arbitrary variants](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-variants) Arbitrary variants are like arbitrary values but for doing on-the-fly selector modification, like you can with built-in pseudo-class variants like `hover:{utility}` or responsive variants like `md:{utility}` but using square bracket notation directly in your HTML. HTML ``` <ul role="list"> {#each items as item} <li class="lg:[&:nth-child(-n+3)]:hover:underline">{item}</li> {/each}</ul> ``` Learn more in the [arbitrary variants](https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants) documentation. ### [Handling whitespace](https://tailwindcss.com/docs/adding-custom-styles#handling-whitespace) When an arbitrary value needs to contain a space, use an underscore (`_`) instead and Tailwind will automatically convert it to a space at build-time: HTML ``` <div class="grid grid-cols-[1fr_500px_2fr]"> <!-- ... --></div> ``` In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs: HTML ``` <div class="bg-[url('/what_a_rush.png')]"> <!-- ... --></div> ``` In the rare case that you actually need to use an underscore but it's ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won't convert it to a space: HTML ``` <div class="before:content-['hello\_world']"> <!-- ... --></div> ``` If you're using something like JSX where the backslash is stripped from the rendered HTML, use [String.raw()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw) so the backslash isn't treated as a JavaScript escape character: ``` <div className={String.raw`before:content-['hello\_world']`}> <!-- ... --></div> ``` ### [Resolving ambiguities](https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities) Many utilities in Tailwind share a common namespace but map to different CSS properties. For example `text-lg` and `text-black` both share the `text-` namespace, but one is for `font-size` and the other is for `color`. When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in: HTML ``` <!-- Will generate a font-size utility --><div class="text-[22px]">...</div><!-- Will generate a color utility --><div class="text-[#bada55]">...</div> ``` Sometimes it really is ambiguous though, for example when using CSS variables: HTML ``` <div class="text-(--my-var)">...</div> ``` In these situations, you can "hint" the underlying type to Tailwind by adding a [CSS data type](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types) before the value: HTML ``` <!-- Will generate a font-size utility --><div class="text-(length:--my-var)">...</div><!-- Will generate a color utility --><div class="text-(color:--my-var)">...</div> ``` ## [Using custom CSS](https://tailwindcss.com/docs/adding-custom-styles#using-custom-css) While Tailwind is designed to handle the bulk of your styling needs, there is nothing stopping you from just writing plain CSS when you need to: CSS ``` @import "tailwindcss";.my-custom-style { /* ... /} ``` ### [Adding base styles](https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles) If you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the `html` or `body` elements: HTML ``` <!doctype html><html lang="en" class="bg-gray-100 font-serif text-gray-900"> <!-- ... --></html> ``` This keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file. If you want to add your own default base styles for specific HTML elements, use the `@layer` directive to add those styles to Tailwind's `base` layer: CSS ``` @layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); }} ``` ### [Adding component classes](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes) Use the `components` layer for any more complicated classes you want to add to your project that you'd still like to be able to override with utility classes. Traditionally these would be classes like `card`, `btn`, `badge` — that kind of thing. CSS ``` @layer components { .card { background-color: var(--color-white); border-radius: var(--radius-lg); padding: --spacing(6); box-shadow: var(--shadow-xl); }} ``` By defining component classes in the `components` layer, you can still use utility classes to override them when necessary: HTML ``` <!-- Will look like a card, but with square corners --><div class="card rounded-none"> <!-- ... --></div> ``` Using Tailwind you probably don't need these types of classes as often as you think. Read our guide on [managing duplication](https://tailwindcss.com/docs/styling-with-utility-classes#managing-duplication) for our recommendations. The `components` layer is also a good place to put custom styles for any third-party components you're using: CSS ``` @layer components { .select2-dropdown { / ... / }} ``` ### [Using variants](https://tailwindcss.com/docs/adding-custom-styles#using-variants) Use the `@variant` directive to apply a Tailwind variant within custom CSS: app.css ``` .my-element { background: white; @variant dark { background: black; }} ``` Compiled CSS ``` .my-element { background: white; @media (prefers-color-scheme: dark) { background: black; }} ``` If you need to apply multiple variants at the same time, use nesting: app.css ``` .my-element { background: white; @variant dark { @variant hover { background: black; } }} ``` Compiled CSS ``` .my-element { background: white; @media (prefers-color-scheme: dark) { &:hover { @media (hover: hover) { background: black; } } }} ``` ## [Adding custom utilities](https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities) ### [Simple utilities](https://tailwindcss.com/docs/adding-custom-styles#simple-utilities) In addition to using the utilities that ship with Tailwind, you can also add your own custom utilities. This can be useful when there's a CSS feature you'd like to use in your project that Tailwind doesn't include utilities for out of the box. Use the `@utility` directive to add a custom utility to your project: CSS ``` @utility content-auto { content-visibility: auto;} ``` You can now use this utility in your HTML: HTML ``` <div class="content-auto"> <!-- ... --></div> ``` It will also work with variants like `hover`, `focus` and `lg`: HTML ``` <div class="hover:content-auto"> <!-- ... --></div> ``` Custom utilities are automatically inserted into the `utilities` layer along with all of the built-in utilities in the framework. ### [Complex utilities](https://tailwindcss.com/docs/adding-custom-styles#complex-utilities) If your custom utility is more complex than a single class name, use nesting to define the utility: CSS ``` @utility scrollbar-hidden { &::-webkit-scrollbar { display: none; }} ``` ### [Functional utilities](https://tailwindcss.com/docs/adding-custom-styles#functional-utilities) In addition to registering simple utilities with the `@utility` directive, you can also register functional utilities that accept an argument: CSS ``` @utility tab- { tab-size: --value(--tab-size-);} ``` The special `--value()` function is used to resolve the utility value. #### [Matching theme values](https://tailwindcss.com/docs/adding-custom-styles#matching-theme-values) Use the `--value(--theme-key-)` syntax to resolve the utility value against a set of theme keys: CSS ``` @theme { --tab-size-2: 2; --tab-size-4: 4; --tab-size-github: 8;}@utility tab-* { tab-size: --value(--tab-size-);} ``` This will match utilities like `tab-2`, `tab-4`, and `tab-github`. #### [Bare values](https://tailwindcss.com/docs/adding-custom-styles#bare-values) To resolve the value as a bare value, use the `--value({type})` syntax, where `{type}` is the data type you want to validate the bare value as: CSS ``` @utility tab- { tab-size: --value(integer);} ``` This will match utilities like `tab-1` and `tab-76`. Available bare value data types are: `number`, `integer`, `ratio`, and `percentage`. #### [Literal values](https://tailwindcss.com/docs/adding-custom-styles#literal-values) To support literal values, use the `--value('literal')` syntax (notice the quotes): CSS ``` @utility tab-* { tab-size: --value("inherit", "initial", "unset");} ``` This will match utilities like `tab-inherit`, `tab-initial`, and `tab-unset`. #### [Arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-values) To support arbitrary values, use the `--value([{type}])` syntax (notice the square brackets) to tell Tailwind which types are supported as an arbitrary value: CSS ``` @utility tab-* { tab-size: --value([integer]);} ``` This will match utilities like `tab-[1]` and `tab-[76]`. Available arbitrary value data types are: `absolute-size`, `angle`, `bg-size`, `color`, `family-name`, `generic-name`, `image`, `integer`, `length`, `line-width`, `number`, `percentage`, `position`, `ratio`, `relative-size`, `url`, `vector`, and ``. #### [Supporting theme, bare, and arbitrary values together](https://tailwindcss.com/docs/adding-custom-styles#supporting-theme-bare-and-arbitrary-values-together) All three forms of the `--value()` function can be used within a rule as multiple declarations, and any declarations that fail to resolve will be omitted in the output: CSS ``` @theme { --tab-size-github: 8;}@utility tab- { tab-size: --value([integer]); tab-size: --value(integer); tab-size: --value(--tab-size-);} ``` This makes it possible to treat the value differently in each case if necessary, for example translating a bare integer to a percentage: CSS ``` @utility opacity- { opacity: --value([percentage]); opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-);} ``` The `--value()` function can also take multiple arguments and resolve them left to right if you don't need to treat the return value differently in different cases: CSS ``` @theme { --tab-size-github: 8;}@utility tab- { tab-size: --value(--tab-size-, integer, [integer]);}@utility opacity- { opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-, [percentage]);} ``` #### [Negative values](https://tailwindcss.com/docs/adding-custom-styles#negative-values) To support negative values, register separate positive and negative utilities into separate declarations: CSS ``` @utility inset- { inset: --spacing(--value(integer)); inset: --value([percentage], [length]);}@utility -inset-* { inset: --spacing(--value(integer) * -1); inset: calc(--value([percentage], [length]) * -1);} ``` #### [Modifiers](https://tailwindcss.com/docs/adding-custom-styles#modifiers) Modifiers are handled using the `--modifier()` function which works exactly like the `--value()` function but operates on a modifier if present: CSS ``` @utility text-* { font-size: --value(--text-, [length]); line-height: --modifier(--leading-, [length], []);} ``` If a modifier isn't present, any declaration depending on a modifier is just not included in the output. #### [Fractions](https://tailwindcss.com/docs/adding-custom-styles#fractions) To handle fractions, we rely on the CSS `ratio` data type. If this is used with `--value()`, it's a signal to Tailwind to treat the value and modifier as a single value: CSS ``` @utility aspect- { aspect-ratio: --value(--aspect-ratio-, ratio, [ratio]);} ``` This will match utilities like `aspect-square`, `aspect-3/4`, and `aspect-[7/9]`. ## [Adding custom variants](https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants) In addition to using the variants that ship with Tailwind, you can also add your own custom variants using the `@custom-variant` directive: ``` @custom-variant theme-midnight { &:where([data-theme="midnight"] ) { @slot; }} ``` Now you can use the `theme-midnight:<utility>` variant in your HTML: ``` <html data-theme="midnight"> <button class="theme-midnight:bg-black ..."></button></html> ``` You can create variants using the shorthand syntax when nesting isn't required: ``` @custom-variant theme-midnight (&:where([data-theme="midnight"] *)); ``` When a custom variant has multiple rules, they can be nested within each other: ``` @custom-variant any-hover { @media (any-hover: hover) { &:hover { @slot; } }} ``` [Colors](https://tailwindcss.com/docs/colors) [Detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files) ### On this page - [Customizing your theme](https://tailwindcss.com/docs/adding-custom-styles#customizing-your-theme) - [Using arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) - [Arbitrary properties](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties) - [Arbitrary variants](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-variants) - [Handling whitespace](https://tailwindcss.com/docs/adding-custom-styles#handling-whitespace) - [Resolving ambiguities](https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities) - [Using custom CSS](https://tailwindcss.com/docs/adding-custom-styles#using-custom-css) - [Adding base styles](https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles) - [Adding component classes](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes) - [Using variants](https://tailwindcss.com/docs/adding-custom-styles#using-variants) - [Adding custom utilities](https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities) - [Simple utilities](https://tailwindcss.com/docs/adding-custom-styles#simple-utilities) - [Complex utilities](https://tailwindcss.com/docs/adding-custom-styles#complex-utilities) - [Functional utilities](https://tailwindcss.com/docs/adding-custom-styles#functional-utilities) - [Adding custom variants](https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants) ### Tailwind CSS - [Documentation](https://tailwindcss.com/docs) - [Playground](https://play.tailwindcss.com/) - [Blog](https://tailwindcss.com/blog) - [Showcase](https://tailwindcss.com/showcase) - [Sponsor](https://tailwindcss.com/sponsor) ### Resources - [Refactoring UI](https://www.refactoringui.com/) - [Headless UI](https://headlessui.com/) - [Heroicons](https://heroicons.com/) - [Hero Patterns](https://heropatterns.com/) ### [Tailwind Plus](https://tailwindcss.com/plus?ref=footer) - [UI Blocks](https://tailwindcss.com/plus/ui-blocks?ref=footer) - [Templates](https://tailwindcss.com/plus/templates?ref=footer) - [UI Kit](https://tailwindcss.com/plus/ui-kit?ref=footer) ### Community - [GitHub](https://github.com/tailwindlabs/tailwindcss) - [Discord](https://tailwindcss.com/sponsor#insiders) - [X](https://x.com/tailwindcss) ### Tailwind CSS - [Documentation](https://tailwindcss.com/docs) - [Playground](https://play.tailwindcss.com/) - [Blog](https://tailwindcss.com/blog) - [Showcase](https://tailwindcss.com/showcase) - [Sponsor](https://tailwindcss.com/sponsor) ### [Tailwind Plus](https://tailwindcss.com/plus?ref=footer) - [UI Blocks](https://tailwindcss.com/plus/ui-blocks?ref=footer) - [Templates](https://tailwindcss.com/plus/templates?ref=footer) - [UI Kit](https://tailwindcss.com/plus/ui-kit?ref=footer) ### Resources - [Refactoring UI](https://www.refactoringui.com/) - [Headless UI](https://headlessui.com/) - [Heroicons](https://heroicons.com/) - [Hero Patterns](https://heropatterns.com/) ### Community - [GitHub](https://github.com/tailwindlabs/tailwindcss) - [Discord](https://tailwindcss.com/sponsor#insiders) - [X](https://x.com/tailwindcss) Copyright © 2026 Tailwind Labs Inc.·[Trademark Policy](https://tailwindcss.com/brand)
Readable Markdown	Best practices for adding your own custom styles in Tailwind projects. Often the biggest challenge when working with a framework is figuring out what you’re supposed to do when there’s something you need that the framework doesn’t handle for you. Tailwind has been designed from the ground up to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework. This guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins. ## [Customizing your theme](https://tailwindcss.com/docs/adding-custom-styles#customizing-your-theme) If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations using the `@theme` directive in your CSS: CSS ``` @theme { --font-display: "Satoshi", "sans-serif"; --breakpoint-3xl: 120rem; --color-avocado-100: oklch(0.99 0 0); --color-avocado-200: oklch(0.98 0.04 113.22); --color-avocado-300: oklch(0.94 0.11 115.03); --color-avocado-400: oklch(0.92 0.19 114.08); --color-avocado-500: oklch(0.84 0.18 117.33); --color-avocado-600: oklch(0.53 0.12 118.34); --ease-fluid: cubic-bezier(0.3, 0, 0, 1); --ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* ... /} ``` Learn more about customizing your theme in the [theme variables documentation](https://tailwindcss.com/docs/theme). ## [Using arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values) While you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect. When you find yourself really needing something like `top: 117px` to get a background image in just the right spot, use Tailwind's square bracket notation to generate a class on the fly with any arbitrary value: HTML ``` <div class="top-[117px]"> <!-- ... --></div> ``` This is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like `hover` and responsive modifiers like `lg`: HTML ``` <div class="top-[117px] lg:top-[344px]"> <!-- ... --></div> ``` This works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more: HTML ``` <div class="bg-[#bada55] text-[22px] before:content-['Festivus']"> <!-- ... --></div> ``` If you're referencing a CSS variable as an arbitrary value, you can use the custom property syntax: HTML ``` <div class="fill-(--my-brand-color) ..."> <!-- ... --></div> ``` This is just a shorthand for `fill-[var(--my-brand-color)]` that adds the `var()` function for you automatically. ### [Arbitrary properties](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties) If you ever need to use a CSS property that Tailwind doesn't include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS: HTML ``` <div class="[mask-type:luminance]"> <!-- ... --></div> ``` This is really* like inline styles, but again with the benefit that you can use modifiers: HTML ``` <div class="[mask-type:luminance] hover:[mask-type:alpha]"> <!-- ... --></div> ``` This can be useful for things like CSS variables as well, especially when they need to change under different conditions: HTML ``` <div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]"> <!-- ... --></div> ``` ### [Arbitrary variants](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-variants) Arbitrary variants are like arbitrary values but for doing on-the-fly selector modification, like you can with built-in pseudo-class variants like `hover:{utility}` or responsive variants like `md:{utility}` but using square bracket notation directly in your HTML. HTML ``` <ul role="list"> {#each items as item} <li class="lg:[&:nth-child(-n+3)]:hover:underline">{item}</li> {/each}</ul> ``` Learn more in the [arbitrary variants](https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants) documentation. ### [Handling whitespace](https://tailwindcss.com/docs/adding-custom-styles#handling-whitespace) When an arbitrary value needs to contain a space, use an underscore (`_`) instead and Tailwind will automatically convert it to a space at build-time: HTML ``` <div class="grid grid-cols-[1fr_500px_2fr]"> <!-- ... --></div> ``` In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs: HTML ``` <div class="bg-[url('/what_a_rush.png')]"> <!-- ... --></div> ``` In the rare case that you actually need to use an underscore but it's ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won't convert it to a space: HTML ``` <div class="before:content-['hello\_world']"> <!-- ... --></div> ``` If you're using something like JSX where the backslash is stripped from the rendered HTML, use [String.raw()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw) so the backslash isn't treated as a JavaScript escape character: ``` <div className={String.raw`before:content-['hello\_world']`}> <!-- ... --></div> ``` ### [Resolving ambiguities](https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities) Many utilities in Tailwind share a common namespace but map to different CSS properties. For example `text-lg` and `text-black` both share the `text-` namespace, but one is for `font-size` and the other is for `color`. When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in: HTML ``` <!-- Will generate a font-size utility --><div class="text-[22px]">...</div><!-- Will generate a color utility --><div class="text-[#bada55]">...</div> ``` Sometimes it really is ambiguous though, for example when using CSS variables: HTML ``` <div class="text-(--my-var)">...</div> ``` In these situations, you can "hint" the underlying type to Tailwind by adding a [CSS data type](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types) before the value: HTML ``` <!-- Will generate a font-size utility --><div class="text-(length:--my-var)">...</div><!-- Will generate a color utility --><div class="text-(color:--my-var)">...</div> ``` ## [Using custom CSS](https://tailwindcss.com/docs/adding-custom-styles#using-custom-css) While Tailwind is designed to handle the bulk of your styling needs, there is nothing stopping you from just writing plain CSS when you need to: CSS ``` @import "tailwindcss";.my-custom-style { /* ... /} ``` ### [Adding base styles](https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles) If you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the `html` or `body` elements: HTML ``` <!doctype html><html lang="en" class="bg-gray-100 font-serif text-gray-900"> <!-- ... --></html> ``` This keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file. If you want to add your own default base styles for specific HTML elements, use the `@layer` directive to add those styles to Tailwind's `base` layer: CSS ``` @layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); }} ``` ### [Adding component classes](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes) Use the `components` layer for any more complicated classes you want to add to your project that you'd still like to be able to override with utility classes. Traditionally these would be classes like `card`, `btn`, `badge` — that kind of thing. CSS ``` @layer components { .card { background-color: var(--color-white); border-radius: var(--radius-lg); padding: --spacing(6); box-shadow: var(--shadow-xl); }} ``` By defining component classes in the `components` layer, you can still use utility classes to override them when necessary: HTML ``` <!-- Will look like a card, but with square corners --><div class="card rounded-none"> <!-- ... --></div> ``` Using Tailwind you probably don't need these types of classes as often as you think. Read our guide on [managing duplication](https://tailwindcss.com/docs/styling-with-utility-classes#managing-duplication) for our recommendations. The `components` layer is also a good place to put custom styles for any third-party components you're using: CSS ``` @layer components { .select2-dropdown { / ... / }} ``` ### [Using variants](https://tailwindcss.com/docs/adding-custom-styles#using-variants) Use the `@variant` directive to apply a Tailwind variant within custom CSS: app.css ``` .my-element { background: white; @variant dark { background: black; }} ``` Compiled CSS ``` .my-element { background: white; @media (prefers-color-scheme: dark) { background: black; }} ``` If you need to apply multiple variants at the same time, use nesting: app.css ``` .my-element { background: white; @variant dark { @variant hover { background: black; } }} ``` Compiled CSS ``` .my-element { background: white; @media (prefers-color-scheme: dark) { &:hover { @media (hover: hover) { background: black; } } }} ``` ## [Adding custom utilities](https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities) ### [Simple utilities](https://tailwindcss.com/docs/adding-custom-styles#simple-utilities) In addition to using the utilities that ship with Tailwind, you can also add your own custom utilities. This can be useful when there's a CSS feature you'd like to use in your project that Tailwind doesn't include utilities for out of the box. Use the `@utility` directive to add a custom utility to your project: CSS ``` @utility content-auto { content-visibility: auto;} ``` You can now use this utility in your HTML: HTML ``` <div class="content-auto"> <!-- ... --></div> ``` It will also work with variants like `hover`, `focus` and `lg`: HTML ``` <div class="hover:content-auto"> <!-- ... --></div> ``` Custom utilities are automatically inserted into the `utilities` layer along with all of the built-in utilities in the framework. ### [Complex utilities](https://tailwindcss.com/docs/adding-custom-styles#complex-utilities) If your custom utility is more complex than a single class name, use nesting to define the utility: CSS ``` @utility scrollbar-hidden { &::-webkit-scrollbar { display: none; }} ``` ### [Functional utilities](https://tailwindcss.com/docs/adding-custom-styles#functional-utilities) In addition to registering simple utilities with the `@utility` directive, you can also register functional utilities that accept an argument: CSS ``` @utility tab- { tab-size: --value(--tab-size-);} ``` The special `--value()` function is used to resolve the utility value. #### [Matching theme values](https://tailwindcss.com/docs/adding-custom-styles#matching-theme-values) Use the `--value(--theme-key-)` syntax to resolve the utility value against a set of theme keys: CSS ``` @theme { --tab-size-2: 2; --tab-size-4: 4; --tab-size-github: 8;}@utility tab-* { tab-size: --value(--tab-size-);} ``` This will match utilities like `tab-2`, `tab-4`, and `tab-github`. #### [Bare values](https://tailwindcss.com/docs/adding-custom-styles#bare-values) To resolve the value as a bare value, use the `--value({type})` syntax, where `{type}` is the data type you want to validate the bare value as: CSS ``` @utility tab- { tab-size: --value(integer);} ``` This will match utilities like `tab-1` and `tab-76`. Available bare value data types are: `number`, `integer`, `ratio`, and `percentage`. #### [Literal values](https://tailwindcss.com/docs/adding-custom-styles#literal-values) To support literal values, use the `--value('literal')` syntax (notice the quotes): CSS ``` @utility tab-* { tab-size: --value("inherit", "initial", "unset");} ``` This will match utilities like `tab-inherit`, `tab-initial`, and `tab-unset`. #### [Arbitrary values](https://tailwindcss.com/docs/adding-custom-styles#arbitrary-values) To support arbitrary values, use the `--value([{type}])` syntax (notice the square brackets) to tell Tailwind which types are supported as an arbitrary value: CSS ``` @utility tab-* { tab-size: --value([integer]);} ``` This will match utilities like `tab-[1]` and `tab-[76]`. Available arbitrary value data types are: `absolute-size`, `angle`, `bg-size`, `color`, `family-name`, `generic-name`, `image`, `integer`, `length`, `line-width`, `number`, `percentage`, `position`, `ratio`, `relative-size`, `url`, `vector`, and ``. #### [Supporting theme, bare, and arbitrary values together](https://tailwindcss.com/docs/adding-custom-styles#supporting-theme-bare-and-arbitrary-values-together) All three forms of the `--value()` function can be used within a rule as multiple declarations, and any declarations that fail to resolve will be omitted in the output: CSS ``` @theme { --tab-size-github: 8;}@utility tab- { tab-size: --value([integer]); tab-size: --value(integer); tab-size: --value(--tab-size-);} ``` This makes it possible to treat the value differently in each case if necessary, for example translating a bare integer to a percentage: CSS ``` @utility opacity- { opacity: --value([percentage]); opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-);} ``` The `--value()` function can also take multiple arguments and resolve them left to right if you don't need to treat the return value differently in different cases: CSS ``` @theme { --tab-size-github: 8;}@utility tab- { tab-size: --value(--tab-size-, integer, [integer]);}@utility opacity- { opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-, [percentage]);} ``` #### [Negative values](https://tailwindcss.com/docs/adding-custom-styles#negative-values) To support negative values, register separate positive and negative utilities into separate declarations: CSS ``` @utility inset- { inset: --spacing(--value(integer)); inset: --value([percentage], [length]);}@utility -inset-* { inset: --spacing(--value(integer) * -1); inset: calc(--value([percentage], [length]) * -1);} ``` #### [Modifiers](https://tailwindcss.com/docs/adding-custom-styles#modifiers) Modifiers are handled using the `--modifier()` function which works exactly like the `--value()` function but operates on a modifier if present: CSS ``` @utility text-* { font-size: --value(--text-, [length]); line-height: --modifier(--leading-, [length], []);} ``` If a modifier isn't present, any declaration depending on a modifier is just not included in the output. #### [Fractions](https://tailwindcss.com/docs/adding-custom-styles#fractions) To handle fractions, we rely on the CSS `ratio` data type. If this is used with `--value()`, it's a signal to Tailwind to treat the value and modifier as a single value: CSS ``` @utility aspect- { aspect-ratio: --value(--aspect-ratio-, ratio, [ratio]);} ``` This will match utilities like `aspect-square`, `aspect-3/4`, and `aspect-[7/9]`. ## [Adding custom variants](https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants) In addition to using the variants that ship with Tailwind, you can also add your own custom variants using the `@custom-variant` directive: ``` @custom-variant theme-midnight { &:where([data-theme="midnight"] ) { @slot; }} ``` Now you can use the `theme-midnight:<utility>` variant in your HTML: ``` <html data-theme="midnight"> <button class="theme-midnight:bg-black ..."></button></html> ``` You can create variants using the shorthand syntax when nesting isn't required: ``` @custom-variant theme-midnight (&:where([data-theme="midnight"] *)); ``` When a custom variant has multiple rules, they can be nested within each other: ``` @custom-variant any-hover { @media (any-hover: hover) { &:hover { @slot; } }} ```
Shard	59 (laksa)
Root Hash	16242711095379765659
Unparsed URL	com,tailwindcss!/docs/adding-custom-styles s443