{"id":15792885,"url":"https://github.com/chempogonzalez/tailwind-semantic-setup","last_synced_at":"2025-03-14T14:30:46.294Z","repository":{"id":65331070,"uuid":"573869058","full_name":"chempogonzalez/tailwind-semantic-setup","owner":"chempogonzalez","description":"🧬 Tailwind preset to enable a good semantic setup for better Design Systems","archived":false,"fork":false,"pushed_at":"2024-04-18T10:52:47.000Z","size":819,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-05T08:06:26.722Z","etag":null,"topics":["classname","colors","css","plugin","preset","semantic","tailwind","tailwindcss","variants"],"latest_commit_sha":null,"homepage":"","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/chempogonzalez.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2022-12-03T17:32:14.000Z","updated_at":"2024-12-31T01:23:42.000Z","dependencies_parsed_at":"2024-04-18T12:05:04.784Z","dependency_job_id":null,"html_url":"https://github.com/chempogonzalez/tailwind-semantic-setup","commit_stats":{"total_commits":30,"total_committers":2,"mean_commits":15.0,"dds":"0.033333333333333326","last_synced_commit":"bb8909aea8d19c32c49989be567ff8ca1490880f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chempogonzalez%2Ftailwind-semantic-setup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chempogonzalez%2Ftailwind-semantic-setup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chempogonzalez%2Ftailwind-semantic-setup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chempogonzalez%2Ftailwind-semantic-setup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chempogonzalez","download_url":"https://codeload.github.com/chempogonzalez/tailwind-semantic-setup/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243593226,"owners_count":20316152,"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":["classname","colors","css","plugin","preset","semantic","tailwind","tailwindcss","variants"],"created_at":"2024-10-04T23:06:33.913Z","updated_at":"2025-03-14T14:30:45.935Z","avatar_url":"https://github.com/chempogonzalez.png","language":"JavaScript","readme":"# 🧬 tailwind-semantic-setup\n\n[![npm version](https://img.shields.io/npm/v/tailwind-semantic-setup?color=blue\u0026style=flat-square)](https://www.npmjs.com/package/tailwind-semantic-setup)\n\nSmart multi-theme tool for better semantic Design Systems\n\n\n## 🚀 **Features**\n- ✅ Multiple themes support\n- 🔥 Auto-generate darker and contrast colors _(better readability)_\n- 📦 All [official tailwind plugins](https://tailwindcss.com/docs/plugins#official-plugins) included by default\n- 🚀 Custom addons to make your life easier:\n   -  `theme name variants` to set classes only for a specific theme\n   -  `wh` utility to set width and height at the same time\n   -  `circle` to set same width and height with border-radius\n   -  `hocus` to set hover and focus at the same time\n   -  ...\n\n\n\n\n## 📦 **Installation**\n```bash\n# NPM\nnpm install -D tailwind-semantic-setup\n\n# PNPM\npnpm add -D tailwind-semantic-setup\n```\n\n\u003cbr\u003e\n\n## 💻 **Usage example**\n\n### 🟣 1. Wrap your tailwind config and set your themes\nIn your tailwind config file, wrap your tailwind config with the `withSemanticSetup` function.\n\u003cbr\u003e\nWith the `semanticSetup` property you can setup your themes to be handled automatically.\n\n```js\n// tailwind.config.js\nconst { withSemanticSetup } = require('tailwind-semantic-setup')\n\nmodule.exports = withSemanticSetup({\n  /* ... your tailwind config */\n  semanticSetup: {\n    themes: [\n      {\n        name: 'my-brand',\n        colors: {\n          primary: '#e0a82e',\n          secondary: '#f9d72f',\n          accent: '#00ffff',\n          neutral: '#181830',\n          root: '#ffffff',\n        },\n      },\n      // ... other themes\n    ],\n  },\n})\n```\n\n### 🟣 2. Add the `data-theme` attribute to your html code\nYou can put it where you want, but it's recommended to put it in the html tag to make it global accessible for the entire application.\n```html\n\u003chtml data-theme=\"my-brand\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/html\u003e\n```\n\n### 🟣 3.  Use the theme classes\n```html\n\u003cdiv class=\"bg-primary text-primary-content\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## 📖 **Documentation**\n\n### 🎨 **Themes**\nYou can define multiple themes in the `semanticSetup` property of your tailwind config.\n\u003cbr\u003e\nEach theme must have a `name` and a `colors` object.\n\n\n\n```js\n// tailwind.config.js\nconst { withSemanticSetup } = require('tailwind-semantic-setup')\n\nmodule.exports = withSemanticSetup({\n  // ... your tailwind config\n  semanticSetup: {\n    themes: [\n      {\n        name: 'my-brand',\n        preferredColorScheme: ['dark', 'light'],\n        colors: {\n          primary: '#e0a82e',\n          secondary: '#f9d72f',\n          accent: '#00ffff',\n          neutral: '#181830',\n          root: '#ffffff',\n        },\n      },\n      // ... other themes\n    ],\n  },\n})\n```\n\n#### 🟠 **`name`** _(required)_\nThe name of the theme. It will be used to generate the classes and the _**data-theme**_ attribute value.\n\n#### 🟠 **`preferredColorScheme`** _(optional)_\nYou can set your preferences for the color scheme to be used in the user's browser. It will set _**color-scheme**_ css property\n\n#### 🟠 **`colors`** _(required)_\nSemantic Setup provides you a semantic default setup but **you can add your custom colors**.\n\u003cbr\u003e\n\nHere you can see the default colors and the ones that are auto-generated for you:\n\n##### **(Required - added by default)**\n▪️ `primary`: The main color of your brand\u003cbr\u003e\n▪️ `secondary`: The secondary color of your brand\u003cbr\u003e\n▪️ `accent`: Color to have high color contrasts and highlight.\u003cbr\u003e\n▪️ `neutral`: The neutral color of your brand\u003cbr\u003e\n▪️ `root`: The base color of your brand (background color)\n\n▪️ `info`: The info color of your brand\u003cbr\u003e\n▪️ `warning`: The warning color of your brand\u003cbr\u003e\n▪️ `error`: The error color of your brand\n\u003cbr\u003e\n\n##### **(Optional - auto-generated for Required colors)**\n- `(colorName)-dark`: The darker version of the (colorName) color _(i.e. `primary-dark`)_\n- `(colorName)-content`: The readable color to use for text and icons on top of the (colorName) color _(i.e. `primary-content`)_\n- `root-darkest` _(just for base color)_: The darkest version of the `root` color\n\n\u003cbr\u003e\n\n\n\u003cbr\u003e\n\n\n![color-palette-image](https://github.com/chempogonzalez/tailwind-semantic-setup/blob/main/assets/palette.png)\n\n\u003cbr\u003e\n\nThis approach allows you to have a consistent color palette for your brand with different themes in a very simple way.\n\u003cbr\u003e\n\nThe default colors approach is mainly based on [daisyui colors palette](https://daisyui.com/docs/colors) but adding some other nice features to make it more customizable/extendable for your brand.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n### 🔌 **Default Plugins activate / deactivate**\nBy default, all [official tailwind plugins](https://tailwindcss.com/docs/plugins#official-plugins) are activated.\n\u003cbr\u003e\nYou can deactivate them individually using the `plugins` property of the `semanticSetup` object in your tailwind config file.\n\nHere you can see the default plugins configuration:\n```js\n// tailwind.config.js\nconst { withSemanticSetup } = require('tailwind-semantic-setup')\n\nmodule.exports = withSemanticSetup({\n  // ... your tailwind config\n  semanticSetup: {\n    plugins: {\n      // @tailwindcss/typography\n      'typography': true,\n      // @tailwindcss/forms\n      'forms': true,\n      // @tailwindcss/line-clamp\n      // Deactivated by default because it's part of tailwindcss v3.3.0\n      'line-clamp': false,\n      // @tailwindcss/aspect-ratio\n      'aspect-ratio': true,\n    },\n  },\n})\n```\n\n\n\n### 🚀 **Custom Addons**\n\n#### 🟠 **`theme name variants`**\nYou can set classes only for a specific theme using the theme name variants.\n\u003cbr\u003e\nThe variant has the following format: `theme-(your-theme-name):class`\n\n```html\n\u003cdiv class=\"p-4 theme-my-brand:p-8\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\n#### 🟠 **`wh`**\nYou can set width and height at the same time.\n\u003cbr\u003e\n\n```html\n\u003cdiv class=\"wh-10\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\n#### 🟠 **`circle`**\nYou can set a circle shape setting same width and height.\n\n```html\n\u003cdiv class=\"circle-8\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\n#### 🟠 **`hocus`**\nYou can set a hover and focus state using the `hocus` utility.\n\n```html\n\u003cdiv class=\"bg-primary hocus:bg-primary-dark\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n\n\u003e Created with JavaScript! ⚡ and latin music 🎺🎵\n\n### This README.md file has been written keeping in mind\n\n- [GitHub Markdown](https://guides.github.com/features/mastering-markdown/)\n- [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchempogonzalez%2Ftailwind-semantic-setup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchempogonzalez%2Ftailwind-semantic-setup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchempogonzalez%2Ftailwind-semantic-setup/lists"}