{"id":17621214,"url":"https://github.com/dev-warner/react-static-plugin-tailwindcss","last_synced_at":"2025-04-30T20:08:16.461Z","repository":{"id":52146322,"uuid":"207019468","full_name":"dev-warner/react-static-plugin-tailwindcss","owner":"dev-warner","description":"A React-Static plugin that adds tailwindcss into your postcss plugins","archived":false,"fork":false,"pushed_at":"2021-05-06T20:52:52.000Z","size":88,"stargazers_count":10,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-30T20:08:09.591Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/dev-warner.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}},"created_at":"2019-09-07T19:59:19.000Z","updated_at":"2022-01-18T15:10:17.000Z","dependencies_parsed_at":"2022-09-08T18:20:47.776Z","dependency_job_id":null,"html_url":"https://github.com/dev-warner/react-static-plugin-tailwindcss","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-warner%2Freact-static-plugin-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-warner%2Freact-static-plugin-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-warner%2Freact-static-plugin-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-warner%2Freact-static-plugin-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-warner","download_url":"https://codeload.github.com/dev-warner/react-static-plugin-tailwindcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251774896,"owners_count":21641731,"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":[],"created_at":"2024-10-22T20:11:54.104Z","updated_at":"2025-04-30T20:08:16.438Z","avatar_url":"https://github.com/dev-warner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A React-Static plugin that adds tailwind support\n\n[![npm version](https://badge.fury.io/js/react-static-plugin-tailwindcss.svg)](https://badge.fury.io/js/react-static-plugin-tailwindcss)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Installation\n\nIn an existing react-static site run:\n\n### Tailwind v2\n\n```bash\n$ yarn add react-static-plugin-tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat -D\n```\n\n### Tailwind v1\n\n```bash\n$ yarn add react-static-plugin-tailwindcss tailwindcss@1.9.6 -D\n```\n\nThen add the plugin to your static.config.js:\n\n```js\nexport default {\n  plugins: [\"react-static-plugin-tailwindcss\"],\n};\n```\n\nNow you can add @tailwind directives to your .css files\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n### CSS-in-JS\n\nIf you're wanting to use tailwind in conjuction with styled-components for example\n\n```bash\nyarn add tailwind.macro@next\n```\n\nstatic.config.js\n\n```js\nexport default {\n  plugins: [\n    [\n      \"react-static-plugin-tailwindcss\",\n      {\n        cssInJs: true,\n      },\n    ],\n  ],\n};\n```\n\nCreate a babel-plugin-macros.config.js file\n\n```js\nmodule.exports = {\n  tailwind: {\n    config: \"./tailwind.config.js\",\n    format: \"auto\",\n  },\n};\n```\n\nNow you can use the tw macro inside styled components\n\n```js\nimport tw from \"tailwind.macro\";\nimport styled from \"styled-components\";\n\nexport const Header = styled.h1`\n  ${tw`text-4xl font-bold text-center text-blue-500`}\n`;\n```\n\n### Autoprefixer\n\nIf you already handle auto prefixer or dont want to use it\n\n```js\nexport default {\n  plugins: [\n    [\n      \"react-static-plugin-tailwindcss\",\n      {\n        autoPrefixer: false,\n      },\n    ],\n  ],\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-warner%2Freact-static-plugin-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-warner%2Freact-static-plugin-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-warner%2Freact-static-plugin-tailwindcss/lists"}