🎨 PrimeReact Kit Tailwind

$3


Installation • Quick Start • Documentation • Examples • Contributing

---

✨ Features

$3 Zero configuration styling with Tailwind CSS $3 Built-in dark mode with CSS variables $3 Easy color customization using CSS variables

$3 Import and use immediately $3 Full TypeScript support included $3 Built and optimized with Vite

---

📋 Prerequisites

Before installing, ensure you have these dependencies:

``json
{
"dependencies": {
"primereact": "^10.9.7",
"tailwindcss": "^4.1.16"
},
"devDependencies": {
"@tailwindcss/vite": "^4.1.16"
}
}
`

---

📦 Installation

Choose your preferred package manager:

npm

`bash
npm install primereact-kit-tailwind
`






pnpm

`bash
pnpm add primereact-kit-tailwind
`






yarn

`bash
yarn add primereact-kit-tailwind
`


---

🚀 Quick Start

$3

Add Tailwind CSS plugin to vite.config.ts:

`typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
plugins: [react(), tailwindcss()],
});
`

$3

Create src/main.css with your theme:



View Complete CSS Setup

`css
@import 'tailwindcss';
@source "../node_modules/primereact-kit-tailwind";
@theme {
/ Light mode colors /
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(93% 0 0);
--color-base-300: oklch(86% 0 0);
--color-base-content: oklch(22.389% 0.031 278.072);

--color-primary: oklch(58% 0.158 241.966);
--color-primary-content: oklch(100% 0 0);

--color-secondary: oklch(55% 0.046 257.417);
--color-secondary-content: oklch(100% 0 0);

--color-accent: oklch(60% 0.118 184.704);
--color-accent-content: oklch(100% 0 0);

--color-neutral: oklch(0% 0 0);
--color-neutral-content: oklch(100% 0 0);

--color-info: oklch(60% 0.126 221.723);
--color-info-content: oklch(100% 0 0);

--color-success: oklch(62% 0.194 149.214);
--color-success-content: oklch(100% 0 0);

--color-warning: oklch(85% 0.199 91.936);
--color-warning-content: oklch(0% 0 0);

--color-error: oklch(70% 0.191 22.216);
--color-error-content: oklch(0% 0 0);

--radius-box: 1rem;
--radius-field: 2rem;
--radius-btn: 0.5rem;
}

.dark {
/ Dark mode colors /
--color-base-100: oklch(30.857% 0.023 264.149);
--color-base-200: oklch(28.036% 0.019 264.182);
--color-base-300: oklch(26.346% 0.018 262.177);
--color-base-content: oklch(82.901% 0.031 222.959);

--color-primary: oklch(86.133% 0.141 139.549);
--color-primary-content: oklch(17.226% 0.028 139.549);

--color-secondary: oklch(73.375% 0.165 35.353);
--color-secondary-content: oklch(14.675% 0.033 35.353);

--color-accent: oklch(74.229% 0.133 311.379);
--color-accent-content: oklch(14.845% 0.026 311.379);

--color-neutral: oklch(24.731% 0.02 264.094);
--color-neutral-content: oklch(82.901% 0.031 222.959);

--color-info: oklch(86.078% 0.142 206.182);
--color-info-content: oklch(17.215% 0.028 206.182);

--color-success: oklch(86.171% 0.142 166.534);
--color-success-content: oklch(17.234% 0.028 166.534);

--color-warning: oklch(86.163% 0.142 94.818);
--color-warning-content: oklch(17.232% 0.028 94.818);

--color-error: oklch(82.418% 0.099 33.756);
--color-error-content: oklch(16.483% 0.019 33.756);

--radius-box: 1rem;
--radius-field: 2rem;
--radius-btn: 0.5rem;
}
`


> 💡 Tip: Customize CSS variables to match your design system

$3

Configure in your main app file:

`typescript
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { PrimeReactProvider } from 'primereact/api';
import primereactKitTailwind from 'primereact-kit-tailwind';
import App from './App';
import './main.css';

createRoot(document.getElementById('root')!).render(

value={{
pt: primereactKitTailwind,
unstyled: true,
}}
>



);
`

---

💡 Examples

$3

`typescript
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';

function App() {
return (

);
}
`

$3

`css
@theme {
--color-primary: oklch(65% 0.2 250);
--color-secondary: oklch(70% 0.15 180);
--color-accent: oklch(75% 0.18 200);
}
`

$3

`css
@theme {
--radius-box: 0.5rem;
--radius-field: 0.25rem;
--radius-btn: 0.375rem;
}
`

---

🎨 Customization

$3 Modify CSS variables for complete color control: - --color-primary - Primary brand color - --color-secondary - Secondary actions - --color-accent - Accent highlights - --color-base-* - Background layers - --color-*-content - Text on colored backgrounds

$3 Adjust component roundness: - --radius-box - Container elements - --radius-field - Input fields - --radius-btn - Buttons

---

🛠️ Development

$3

`bash

Clone repository

git clone https://github.com/Forlk4/primereact-kit-tailwind.git
cd primereact-kit-tailwind

Install dependencies

npm install

Build library

npm run build

Format code

npm run format
`

$3

`
primereact-kit-tailwind/
├── 📁 src/
│ ├── 📁 button/ # Button components
│ ├── 📁 data/ # Data display components
│ ├── 📁 form/ # Form components
│ ├── 📁 misc/ # Miscellaneous components
│ ├── 📁 overlay/ # Overlay components
│ ├── 📁 panel/ # Panel components
│ ├── 📁 utils/ # Utility functions
│ ├── 📄 index.js # Main entry point
│ └── 📄 index.d.ts # TypeScript definitions
├── 📁 dist/ # Build output
├── 📄 package.json
└── 📄 vite.config.ts
`

---

🤝 Contributing

Contributions are welcome! Help us make this project better.

$3

1. Fork the repository
2. Create your feature branch
`bash
git checkout -b feature/amazing-feature
`
3. Commit your changes
`bash
git commit -m 'feat: add amazing feature'
`
4. Push to the branch
`bash
git push origin feature/amazing-feature
`
5. Open a Pull Request

$3

- ✅ Follow existing code style
- ✅ Run npm run format` before committing
- ✅ Add/update tests if applicable
- ✅ Update documentation for new features

---

📚 Documentation

| Resource | Link |
|----------|------|
| 📦 GitHub Repository | github.com/Forlk4/primereact-kit-tailwind |
| 📖 PrimeReact Docs | primereact.org |
| 🎨 Tailwind CSS Docs | tailwindcss.com |
| 🐛 Report Issues | GitHub Issues |


---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

💖 Support

If you find this project helpful, please consider:

⭐ Starring the repository

🐛 Reporting issues

🤝 Contributing code

📢 Sharing with others

---

Made with ❤️ by the community