TailwindCSS Tools

Live Demo

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:

git clone https://github.com/defnone/tailwindcss-tools.git

2. Install dependencies:

npm install
# or
yarn install

3. Run the development server:

npm run dev
# or
yarn dev

4. Open 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.