{"id":14962142,"url":"https://github.com/mathiasgilson/tailwind-styled-component","last_synced_at":"2025-05-14T04:09:59.315Z","repository":{"id":38798399,"uuid":"312355854","full_name":"MathiasGilson/Tailwind-Styled-Component","owner":"MathiasGilson","description":"Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering","archived":false,"fork":false,"pushed_at":"2024-12-06T21:04:32.000Z","size":581,"stargazers_count":822,"open_issues_count":33,"forks_count":45,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-11T15:57:02.335Z","etag":null,"topics":["css","css-in-js","react","styled-components","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin","tailwindcss-ui","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/MathiasGilson.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":"2020-11-12T17:58:50.000Z","updated_at":"2025-03-31T23:04:16.000Z","dependencies_parsed_at":"2024-06-18T12:31:56.545Z","dependency_job_id":"c1b0a440-e54a-42a8-9bc6-8541c24d5a5a","html_url":"https://github.com/MathiasGilson/Tailwind-Styled-Component","commit_stats":{"total_commits":169,"total_committers":9,"mean_commits":18.77777777777778,"dds":"0.49112426035502954","last_synced_commit":"25e24e62c667208be7504ea4a73ab519544dee95"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MathiasGilson%2FTailwind-Styled-Component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MathiasGilson%2FTailwind-Styled-Component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MathiasGilson%2FTailwind-Styled-Component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MathiasGilson%2FTailwind-Styled-Component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MathiasGilson","download_url":"https://codeload.github.com/MathiasGilson/Tailwind-Styled-Component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254070109,"owners_count":22009559,"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","css-in-js","react","styled-components","tailwind","tailwind-css","tailwindcss","tailwindcss-plugin","tailwindcss-ui","typescript"],"created_at":"2024-09-24T13:29:31.912Z","updated_at":"2025-05-14T04:09:54.303Z","avatar_url":"https://github.com/MathiasGilson.png","language":"TypeScript","readme":"# Tailwind-Styled-Component\n\nCreate tailwind css react components like styled components with classes name on multiple lines\n\n[![NPM version][npm-image]][npm-url]\n\n[npm-image]: http://img.shields.io/npm/v/tailwind-styled-components.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/tailwind-styled-components\n\n#### Before 😬\n\n```\n\u003cdiv className=`flex ${primary ? \"bg-indigo-600\" : \"bg-indigo-300\"} inline-flex items-center border border-transparent text-xs font-medium rounded shadow-sm text-white hover:bg-indigo-700 focus:outline-none`\u003e\n```\n\n#### After 🥳\n\n`\u003cButton $primary={false}\u003e`\n\n```js\nconst Button = tw.div`\n    ${(p) =\u003e (p.$primary ? \"bg-indigo-600\" : \"bg-indigo-300\")}\n\n    flex\n    inline-flex\n    items-center\n    border\n    border-transparent\n    text-xs\n    font-medium\n    rounded\n    shadow-sm\n    text-white\n\n    hover:bg-indigo-700\n    focus:outline-none\n`\n```\n\n## Features\n\n♻️ Reusable\n\n🧩 Extendable\n\n💅 Compatible with Styled Components\n\n⚡️ Use props like every React Component\n\n🤯 Stop editing 400+ characters lines\n\n🧘 Cleaner code in the render function\n\n## Install\n\nUsing [npm](http://npmjs.org/package/tailwind-styled-components)\n```bash\nnpm i -D tailwind-styled-components\n```\n\nUsing [yarn](https://yarnpkg.com)\n```\nyarn add -D tailwind-styled-components\n```\n\n*⚠️ This extension requires TailwindCSS to be installed and configured on your project too. [Install TailwindCSS](https://tailwindcss.com/docs/installation)*\n\n#### [Optional] Configure IntelliSense autocomplete on VSCode\n\nFirst, install Tailwind CSS IntelliSense VSCode extension\n\nhttps://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss\n\nThen add these user settings ([How to edit VSCode settings?](https://code.visualstudio.com/docs/getstarted/settings))\n\n```js\n\"tailwindCSS.includeLanguages\": {\n    \"typescript\": \"javascript\", // if you are using typescript\n    \"typescriptreact\": \"javascript\"  // if you are using typescript with react\n},\n\"editor.quickSuggestions\": {\n    \"strings\": true // forces VS Code to trigger completions when editing \"string\" content\n},\n\"tailwindCSS.experimental.classRegex\": [\n    \"tw`([^`]*)\", // tw`...`\n    \"tw\\\\.[^`]+`([^`]*)`\", // tw.xxx\u003cxxx\u003e`...`\n    \"tw\\\\(.*?\\\\).*?`([^`]*)\" // tw(Component)\u003cxxx\u003e`...`\n]\n```\n\n## Usage\n\n### Import\n\n```js\nimport tw from \"tailwind-styled-components\"\n```\n\n### Basic\n\nCreate a Tailwind Styled Component with Tailwind rules that you can render directly\n\n```js\nconst Container = tw.div`\n    flex\n    items-center\n    justify-center\n    flex-col\n    w-full\n    bg-indigo-600\n`\n```\n\n```js\nrender(\n    \u003cContainer\u003e\n        \u003cdiv\u003eUse the Container as any other React Component\u003c/div\u003e\n    \u003c/Container\u003e\n)\n```\n\nWill be rendered as\n\n```html\n\u003cdiv class=\"flex items-center justify-center flex-col w-full bg-indigo-600\"\u003e\n    \u003cdiv\u003eUse the Container as any other React Component\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Conditional class names\n\nSet tailwind class conditionally with the same syntax as [styled components](https://styled-components.com/docs/basics#adapting-based-on-props)\n\n```ts\ninterface ButtonProps {\n   $primary: boolean\n}\n\nconst Button = tw.button\u003cButtonProps\u003e`\n    flex\n    ${(p) =\u003e (p.$primary ? \"bg-indigo-600\" : \"bg-indigo-300\")}\n`\n```\n\n*Tailwind Styled Components supports [Transient Props](https://styled-components.com/docs/api#transient-props)*\n\n*Prefix the props name with a dollar sign ($) to prevent forwarding them to the DOM element*\n\n```jsx\n\u003cButton $primary={true} /\u003e\n```\n\nWill be rendered as\n\n```html\n\u003cbutton class=\"flex bg-indigo-600\"\u003e\n    \u003c!-- children --\u003e\n\u003c/button\u003e\n```\n\nand\n\n```jsx\n\u003cButton $primary={false} /\u003e\n```\n\nWill be rendered as\n\n```html\n\u003cbutton class=\"flex bg-indigo-300\"\u003e\n    \u003c!-- children --\u003e\n\u003c/button\u003e\n```\n\n---\n\n**Be sure to set the entire class name**\n\n✅ \u0026nbsp;Do `${p =\u003e p.$primary ? \"bg-indigo-600\" : \"bg-indigo-300\"}`\n\n❌ \u0026nbsp;Don't `bg-indigo-${p =\u003e p.$primary ? \"600\" : \"300\"}`\n\n---\n\n### Extends\n\n```js\nconst DefaultContainer = tw.div`\n    flex\n    items-center\n`\n```\n\n```js\nconst RedContainer = tw(DefaultContainer)`\n    bg-red-300\n`\n```\n\nWill be rendered as\n\n```html\n\u003cdiv class=\"flex items-center bg-red-300\"\u003e\n    \u003c!-- children --\u003e\n\u003c/div\u003e\n```\n\n### Extends Styled Component\n\nExtend [styled components](https://github.com/styled-components/styled-components)\n\n```js\nconst StyledComponentWithCustomCss = styled.div`\n    filter: blur(1px);\n`\n\nconst  = tw(StyledComponentWithCustomCss)`\n   flex\n`\n```\n\n*Css rule `filter` is not supported by default on TailwindCSS*\n\nWill be rendered as\n\n```html\n\u003cdiv class=\"flex\" style=\"filter: blur(1px);\"\u003e\n    \u003c!-- children --\u003e\n\u003c/div\u003e\n```\n\n### Polymorphic Components\n\nIf you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the `$as` prop to do this at runtime.\n\n```js\nconst Button = tw.button`inline-flex items-center p-2`\n\n\u003cButton $as=\"a\" href=\"#\"\u003eLink\u003c/Button\u003e\n```\n\nWill render as\n\n```html\n\u003ca href=\"#\" class=\"inline-flex items-center p-2\"\u003eLink\u003c/a\u003e\n```\n\n## Example\n\n```tsx\nimport React from \"react\"\nimport tw from \"tailwind-styled-components\"\nimport styled from \"styled-components\"\n\n// Create a \u003cTitle\u003e react component that renders an \u003ch1\u003e which is\n// indigo and sized at 1.125rem\ninterface TitleProps {\n    $large: boolean;\n}\n\nconst Title = tw.h1\u003cTitleProps\u003e`\n  ${(p) =\u003e (p.$large ? \"text-lg\" : \"text-base\")}\n  text-indigo-500\n`\n\n// Create a \u003cSpecialBlueContainer\u003e react component that renders a \u003csection\u003e with\n// a special blue background color\nconst SpecialBlueContainer = styled.section`\n    background-color: #0366d6;\n`\n\n// Create a \u003cContainer\u003e react component that extends the SpecialBlueContainer to render\n// a tailwind \u003csection\u003e with the special blue background and adds the flex classes\nconst Container = tw(SpecialBlueContainer)`\n    flex\n    items-center\n    justify-center\n    w-full\n`\n\n// Use them like any other React component – except they're styled!\nrender(\n    \u003cContainer\u003e\n        \u003cTitle $large={true}\u003eHello World, this is my first tailwind styled component!\u003c/Title\u003e\n    \u003c/Container\u003e\n)\n```\n\n\nSponsored by [qualtir.com](https://qualtir.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiasgilson%2Ftailwind-styled-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathiasgilson%2Ftailwind-styled-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiasgilson%2Ftailwind-styled-component/lists"}