https://github.com/defnone/tailwindcss-tools
Simple Theme Editor for Tailwind CSS and ShadCN Components
https://github.com/defnone/tailwindcss-tools
shadcn-ui tailwindcss
Last synced: 4 months ago
JSON representation
Simple Theme Editor for Tailwind CSS and ShadCN Components
- Host: GitHub
- URL: https://github.com/defnone/tailwindcss-tools
- Owner: defnone
- Created: 2024-12-23T12:57:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-25T12:00:04.000Z (over 1 year ago)
- Last Synced: 2024-12-25T12:18:41.961Z (over 1 year ago)
- Topics: shadcn-ui, tailwindcss
- Language: TypeScript
- Homepage: https://defnone.github.io/tailwindcss-tools/
- Size: 349 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TailwindCSS Tools
[Live Demo](https://defnone.github.io/tailwindcss-tools/)
A fun side project built to experiment with Cursor AI editor capabilities. This is an interactive theme customization tool for shadcn/ui components, allowing real-time visualization and configuration of theme properties.
## Features
- **Live Theme Preview**: See your changes in real-time with a comprehensive component showcase
- **Color Customization**: Easily modify colors for all theme variables including:
- Background colors
- Text colors
- Primary/Secondary colors
- Accent colors
- Border colors
- And more...
- **Typography Settings**: Customize text properties:
- Font sizes (H1-H4)
- Base text size
- Letter spacing
- Line height
- **Component Examples**: View your theme applied to various components:
- Buttons
- Cards
- Forms
- Dialogs
- Tables
- Sidebars
- And more...
- **Theme Export**: Export your customized theme as CSS variables
## Tech Stack
- Next.js
- React
- Tailwind CSS
- shadcn/ui components
- TypeScript
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/defnone/tailwindcss-tools.git
```
2. Install dependencies:
```bash
npm install
# or
yarn install
```
3. Run the development server:
```bash
npm run dev
# or
yarn dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
## Usage
1. Navigate through different sections using the top navigation:
- Theme Customizer
- Sizing & Typography
- Colors
2. Modify theme variables using the left sidebar controls
3. Preview changes in real-time on the component examples
4. Export your customized theme using the "Export Theme" button
## Contributing
Feel free to contribute to this project by submitting issues or pull requests.
## License
This project is open-source and available under the MIT license.