{"id":27742837,"url":"https://github.com/phucbm/tailwindcss-style-props","last_synced_at":"2026-05-02T06:32:38.665Z","repository":{"id":290332660,"uuid":"974066516","full_name":"phucbm/tailwindcss-style-props","owner":"phucbm","description":"A Tailwind CSS plugin that enables easy addition of multiple inline style properties using a custom style utility.","archived":false,"fork":false,"pushed_at":"2025-04-28T08:16:36.000Z","size":38,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-28T09:39:11.625Z","etag":null,"topics":["inline-styles","tailwindcss","tailwindcss-plugin","tailwindv3"],"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/phucbm.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,"zenodo":null}},"created_at":"2025-04-28T07:53:43.000Z","updated_at":"2025-04-28T08:18:47.000Z","dependencies_parsed_at":"2025-04-28T09:52:49.138Z","dependency_job_id":null,"html_url":"https://github.com/phucbm/tailwindcss-style-props","commit_stats":null,"previous_names":["phucbm/tailwindcss-style-props"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Ftailwindcss-style-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Ftailwindcss-style-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Ftailwindcss-style-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Ftailwindcss-style-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phucbm","download_url":"https://codeload.github.com/phucbm/tailwindcss-style-props/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251349323,"owners_count":21575438,"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":["inline-styles","tailwindcss","tailwindcss-plugin","tailwindv3"],"created_at":"2025-04-28T16:50:11.258Z","updated_at":"2026-05-02T06:32:38.658Z","avatar_url":"https://github.com/phucbm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @phucbm/tailwindcss-style-props\n\n[![npm version](https://badgen.net/npm/v/@phucbm/tailwindcss-style-props?icon=npm)](https://www.npmjs.com/package/@phucbm/tailwindcss-style-props)\n[![npm downloads](https://badgen.net/npm/dm/@phucbm/tailwindcss-style-props?icon=npm)](https://www.npmjs.com/package/@phucbm/tailwindcss-style-props)\n[![npm dependents](https://badgen.net/npm/dependents/@phucbm/tailwindcss-style-props?icon=npm)](https://www.npmjs.com/package/@phucbm/tailwindcss-style-props)\n[![github stars](https://badgen.net/github/stars/phucbm/tailwindcss-style-props?icon=github)](https://github.com/phucbm/tailwindcss-style-props/)\n[![jsdelivr npm rank](https://badgen.net/jsdelivr/rank/npm/@phucbm/tailwindcss-style-props?icon=npm)](https://www.npmjs.com/package/@phucbm/tailwindcss-style-props)\n[![github license](https://badgen.net/github/license/phucbm/tailwindcss-style-props?icon=github)](https://github.com/phucbm/tailwindcss-style-props/blob/main/LICENSE)\n[![Made in Vietnam](https://raw.githubusercontent.com/webuild-community/badge/master/svg/made.svg)](https://webuild.community)\n\nA Tailwind CSS plugin that enables easy addition of multiple inline style properties using a custom `style` utility.\n\n## Installation\n\n```bash\n# Using npm\nnpm install @phucbm/tailwindcss-style-props\n\n# Using yarn\nyarn add @phucbm/tailwindcss-style-props\n\n# Using pnpm\npnpm add @phucbm/tailwindcss-style-props\n```\n\n## Setup\n\nAdd the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  // ...rest of your config\n  plugins: [\n    require('@phucbm/tailwindcss-style-props'),\n    // ...other plugins\n  ],\n}\n```\n\n## Usage\n\nUse the `style` utility to add multiple inline style properties:\n\n```html\n\u003c!-- Basic usage --\u003e\n\u003cdiv class=\"style-[color=red;font-size=16px]\"\u003e\n  This text will be red with a font-size of 16px\n\u003c/div\u003e\n\n\u003c!-- With CSS variables --\u003e\n\u003cdiv class=\"style-[color=var(--my-color);background=var(--my-bg)]\"\u003e\n  Using CSS variables\n\u003c/div\u003e\n\n\u003c!-- Complex values --\u003e\n\u003cdiv class=\"style-[transform=rotate(45deg);transition=all_0.3s_ease]\"\u003e\n  Complex property values\n\u003c/div\u003e\n```\n\n## How it works\n\nThe plugin parses the string value provided to the `style` utility by:\n\n1. Splitting the string by semicolons (`;`) to get individual CSS declarations\n2. For each declaration, splitting by equals sign (`=`) to get property-value pairs\n3. Converting these pairs into a CSS object that Tailwind can apply\n\n## Examples\n\n```html\n\u003c!-- Multiple properties --\u003e\n\u003cdiv class=\"style-[color=blue;padding=10px;margin=5px]\"\u003e\n  Multiple styles applied\n\u003c/div\u003e\n\n\u003c!-- With responsive prefixes --\u003e\n\u003cdiv class=\"md:style-[display=flex;gap=10px]\"\u003e\n  Only applies on medium screens and up\n\u003c/div\u003e\n\n\u003c!-- With hover state --\u003e\n\u003cdiv class=\"hover:style-[background=yellow;color=black]\"\u003e\n  Changes on hover\n\u003c/div\u003e\n\n\u003c!-- Combined with other utilities --\u003e\n\u003cdiv class=\"rounded shadow p-4 style-[max-width=500px;margin=0_auto]\"\u003e\n  Combined with standard Tailwind utilities\n\u003c/div\u003e\n```\n\n## Notes\n\n- Use equals sign (`=`) instead of colons (`:`) to separate property and value\n- Use semicolons (`;`) to separate multiple style declarations\n- For complex values with spaces, use underscores (`_`), which will be interpreted as spaces\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Ftailwindcss-style-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphucbm%2Ftailwindcss-style-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Ftailwindcss-style-props/lists"}