{"id":27414461,"url":"https://github.com/wedevsofficial/tail-react","last_synced_at":"2025-04-14T08:25:01.952Z","repository":{"id":186322979,"uuid":"673876459","full_name":"weDevsOfficial/tail-react","owner":"weDevsOfficial","description":"Collection of reusable React components styled with Tailwind CSS","archived":false,"fork":false,"pushed_at":"2025-04-11T15:09:18.000Z","size":2275,"stargazers_count":8,"open_issues_count":1,"forks_count":3,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-11T15:30:58.479Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tail-react-wedevs.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weDevsOfficial.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-08-02T16:13:23.000Z","updated_at":"2025-04-11T15:09:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"e07bd35c-5eb0-4503-811a-2b16760e2fac","html_url":"https://github.com/weDevsOfficial/tail-react","commit_stats":null,"previous_names":["wedevsofficial/tail-react"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weDevsOfficial%2Ftail-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weDevsOfficial%2Ftail-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weDevsOfficial%2Ftail-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weDevsOfficial%2Ftail-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weDevsOfficial","download_url":"https://codeload.github.com/weDevsOfficial/tail-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248844497,"owners_count":21170583,"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":"2025-04-14T08:25:01.117Z","updated_at":"2025-04-14T08:25:01.932Z","avatar_url":"https://github.com/weDevsOfficial.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind CSS + React Component Library\n\nThis repository contains a collection of reusable React components styled with Tailwind CSS. The components are designed to be easily integrated into your React projects, providing a consistent and visually appealing user interface.\n\n## Installation\n\nTo use this component library in your project, you can install it via `npm` or `yarn`.\n\n```bash\nnpm install @wedevs/tail-react\n# or\nyarn add @wedevs/tail-react\n```\n\n## Usage\n\n### Tailwind CSS v3\n\nIf you're using Tailwind CSS v3, update your `tailwind.config.js` file:\n\n```diff\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n+    \"node_modules/@wedevs/tail-react/dist/index.js\"\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [\n+    import('@tailwindcss/forms'),\n  ],\n}\n```\n\n### Tailwind CSS v4\n\nFor Tailwind CSS v4, configuration is done in your CSS file:\n\n```css\n@import 'tailwindcss';\n\n/* Import tail-react components */\n@source \"node_modules/@wedevs/tail-react/dist/index.js\";\n\n@theme {\n  /* Your theme customizations */\n}\n```\n\n### Customizing the theme color\n\nBy default, the component library uses `indigo` as the primary color. You can customize this using the `TailReactBaseColorProvider`:\n\n```jsx\nimport { TailReactBaseColorProvider, Button } from '@wedevs/tail-react';\n\nfunction App() {\n  return (\n    \u003cTailReactBaseColorProvider color=\"blue\"\u003e\n      {/* All components inside will use blue as the primary color */}\n      \u003cButton variant=\"primary\"\u003ePrimary Blue Button\u003c/Button\u003e\n    \u003c/TailReactBaseColorProvider\u003e\n  );\n}\n```\n\nAvailable color options include all Tailwind CSS colors:\n\n- `slate`, `gray`, `zinc`, `neutral`, `stone`\n- `red`, `orange`, `amber`, `yellow`, `lime`\n- `green`, `emerald`, `teal`, `cyan`, `sky`\n- `blue`, `indigo` (default), `violet`, `purple`, `fuchsia`\n- `pink`, `rose`\n\n#### Important: Prevent color classes from being purged\n\n##### Tailwind CSS v3\n\nWhen using dynamic color classes with TailReactBaseColor context in Tailwind CSS v3, you need to safelist these classes in your Tailwind config to prevent them from being purged in production:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  // ... your existing config\n  safelist: [\n    // Safelist color variants that you plan to use dynamically\n    {\n      pattern: /bg-(red|blue|green|purple|indigo|etc)-(500|600|700)/,\n    },\n    {\n      pattern: /text-(red|blue|green|purple|indigo|etc)-(500|600)/,\n    },\n    {\n      pattern: /ring-(red|blue|green|purple|indigo|etc)-(400|500|600)/,\n    },\n    // Add other patterns based on which color utilities you use\n  ],\n  // ... rest of your config\n};\n```\n\nThis approach allows you to safelist utility classes using patterns, which is much more concise than listing each class individually.\n\n## Development\n\nTo get started with development:\n\n1. Clone the repository\n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n3. Start the development server:\n   ```bash\n   npm run dev\n   ```\n4. Build the library:\n   ```bash\n   npm run build\n   ```\n5. Run Storybook:\n   ```bash\n   npm run storybook\n   ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwedevsofficial%2Ftail-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwedevsofficial%2Ftail-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwedevsofficial%2Ftail-react/lists"}