{"id":14962239,"url":"https://github.com/mwnciau/tailwindcss-unimportant","last_synced_at":"2025-10-24T22:32:15.770Z","repository":{"id":197186145,"uuid":"698163600","full_name":"mwnciau/tailwindcss-unimportant","owner":"mwnciau","description":"Adds lower specificity utility classes to be used in components","archived":false,"fork":false,"pushed_at":"2023-12-11T13:27:15.000Z","size":30,"stargazers_count":22,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T04:31:42.535Z","etag":null,"topics":["css","javascript","js","plugin","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwindcss-unimportant","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mwnciau.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-29T09:51:09.000Z","updated_at":"2024-09-10T08:11:04.000Z","dependencies_parsed_at":"2024-09-17T14:17:37.707Z","dependency_job_id":null,"html_url":"https://github.com/mwnciau/tailwindcss-unimportant","commit_stats":{"total_commits":14,"total_committers":3,"mean_commits":4.666666666666667,"dds":0.1428571428571429,"last_synced_commit":"d3e7707a8dbc911f0f817a5240c359173aafaffd"},"previous_names":["mwnciau/tailwindcss-unimportant"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwnciau%2Ftailwindcss-unimportant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwnciau%2Ftailwindcss-unimportant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwnciau%2Ftailwindcss-unimportant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mwnciau%2Ftailwindcss-unimportant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mwnciau","download_url":"https://codeload.github.com/mwnciau/tailwindcss-unimportant/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238043742,"owners_count":19407095,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","javascript","js","plugin","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"created_at":"2024-09-24T13:29:45.699Z","updated_at":"2025-10-24T22:32:10.487Z","avatar_url":"https://github.com/mwnciau.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `tailwindcss-unimportant`\nA [Tailwind CSS] plugin that creates lower-specificity utility classes that can\nbe used to create components with overridable defaults.\n\n## Installation\n\n```sh\nnpm install tailwindcss-unimportant\n```\n\nAdd the `tailwindcss-unimportant` plugin to your `tailwind.config.js` file.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [require('tailwindcss-unimportant')],\n}\n```\n\nNote: if you need to specify the `important` option in your tailwind\nconfiguration, you will need to pass it in as an option to the plugin.\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  plugins: [require('tailwindcss-unimportant')({ important: '[my-custom-selector]' })],\n}\n```\n\n## Getting started\n\nTo make a class unimportant, use the `-:` variant.\n\n```html\n\u003cp class=\"-:font-bold\"\u003eHello world\u003c/p\u003e\n```\n\nThese classes will always have lower precedence than classes without the variant.\n\n```php\n// The text will have normal or bold weight depending on the order of the\n// `font-bold` and `font-normal` classes in the compiled CSS.\n\u003cp class=\"font-bold font-normal\"\u003eHello world\u003c/p\u003e\n\n// The text will always have normal weight\n\u003cp class=\"-:font-bold font-normal\"\u003eHello world\u003c/p\u003e\n```\n\nThis is useful when making components where you want to be able to override the\ndefault classes.\n\n```php\n/// paragraph.blade.php\n\u003cp {{ \n    $attributes-\u003emerge(['class' =\u003e '-:text-base -:font-normal'])\n}}\u003e\n    {{ $slot }}\n\u003c/p\u003e\n\n/// index.blade.php\n// The classes in the paragraph component have lower specificity so we can\n// easily override them.\n\u003cx-paragraph class=\"text-lg font-bold\"\u003eHello world!\u003c/x-paragraph\u003e\n```\n\n### Making classes even more unimportant\n\nSometimes it's useful to extend components within other components, and you can\nrun into the same problem of clashing Tailwind classes.\n\nThis plugin provides additional class variants for up to 10 levels of\nunimportance: `--:`, `---:`, `----:`, etc. \n\n```php\n// -:text-blue takes precedence over --:text-green, which takes precedence over\n// ---:text-red\n\u003ca class=\"---:text-red --:text-green -:text-blue\"\u003e\n    The link is blue\n\u003c/a\u003e\n```\n\nAs the variants become larger, you may prefer to use the number variants, where\nthe lowest number takes precedence: `--1:`, `--2:`, `--3:`, etc. The number and\nsymbol variants can be used interchangeably.\n\n```php\n// This example is identical to the previous example\n\u003ca class=\"--5:text-red --:text-green --1:text-blue\"\u003e\n    The link is blue\n\u003c/a\u003e\n```\n\nArbitrary values are also supported. For example, `--[5]:` is equivalent to\n`-----:`. Zero and negative values can be used to make classes of higher\nprecedence.\n\n| Unimportance | Symbolic variant | Numberic variant |\n|--------------|------------------|------------------|\n| 1            | `-:`             | `--1:`           |\n| 2            | `--:`            | `--2:`           |\n| 3            | `---:`           | `--3:`           |\n| 4            | `----:`          | `--4:`           |\n| 5            | `-----:`         | `--5:`           |\n| 6            | `------:`        | `--6:`           |\n| 7            | `-------:`       | `--7:`           |\n| 8            | `--------:`      | `--8:`           |\n| 9            | `---------:`     | `--9:`           |\n| 10           | `----------:`    | `--10:`          |\n| `n`          | _n/a_            | `--[n]:`         |\n\n\n## How it works\n\nThe `-:` variant wraps the selector for a given class in the css `:where()`\nfunction, reducing its [specificity] to `0-0-0`. This means classes you use\nwithout the unimportant variant will be applied preferentially.\n\n```css\n/* Specificity of 0-1-0 */\n.bg-white\n\n/* Specificity of 0-0-0 */\n:where(.-\\:bg-white)\n```\n\nHowever, having a specificity of `0-0-0` means that the default tailwind base\nrules and any base rules you create will take precedence over the unimportant\nclasses. In many cases, this makes the unimportant classes useless.\n\n```html\n\u003cstyle\u003e\n/* Specificity of 0-0-1 */\na {\n    color: blue;\n}\n\n/* Specificity of 0-0-0 */\n:where(.-\\:text-red) {\n    color: red;\n} \n\u003c/style\u003e\n\n\u003ca class=\"-:text-red\"\u003eThe link is blue\u003c/a\u003e\n```\n\nTo fix this problem, the plugin sets the `important` Tailwind configuration\noption to `:root`. This increases the specificity of all Tailwind classes by\n0-1-0, meaning our unimportant classes now have a higher specificity than the\nbase rules.\n\n```html\n\u003cstyle\u003e\n/* Specificity of 0-0-1 */\na {\n    color: blue;\n}\n\n/* Specificity of 0-2-0 */\n:root .text-green {\n    color: green;\n}\n\n/* Specificity of 0-1-0 */\n:root :where(.-\\:text-red) {\n    color: red;\n}\n\u003c/style\u003e\n\n\u003ca class=\"-:text-red\"\u003eThe link is red\u003c/a\u003e\n\u003ca class=\"-:text-red text-green\"\u003eThe link is green\u003c/a\u003e\n```\n\n### Levels of unimportance\n\nClasses with greater levels of unimportance are output first in the generated\nCSS file so that the less unimportant classes take precedence.\n\n```css\n/* The more unimportant class is output first */\n.--\\:bg-white {...}\n\n/* The later CSS rule takes precedence */\n.-\\:bg-black {...}\n```\n\n[Tailwind CSS]: https://github.com/tailwindlabs/tailwindcss\n[specificity]: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmwnciau%2Ftailwindcss-unimportant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmwnciau%2Ftailwindcss-unimportant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmwnciau%2Ftailwindcss-unimportant/lists"}