Getting Started

🎨 Theme Generator

# Introduction

Welcome to the Theme Generator! This tool allows you to create your own Tailwind CSS color shades, ranging from 50 to 950. These colors can be used as primary and accent colors, or any custom colors you desire.

# How It Works

The Theme Generator component produces a JSON payload containing color information. You can use this payload in your theme.ts file or directly in your tailwind.config.js.

# Steps to Generate Your Theme

1. Select Colors: Choose a primary color and an accent color.
2. Generate Theme: Click the Generate Theme button. This action will load a JSON payload with the color objects.
3. Copy the Payload: Copy the entire JSON payload.

# Integrate with Your Project

1. Locate theme.ts: Go to your project's boot folder and find theme.ts. If it doesn't exist, create a new file.
2. Define customTheme:
   • If a constant named customTheme already exists, replace its value with the copied JSON.
   • If it doesn't exist, create a new constant like this:

   •          export const customTheme = /* Your JSON payload here */;
     
           

3. Define tailwind.config.js:
   • Import customTheme at the top of your tailwind.config.js file.
   • Extend the theme by adding the colors:

   •         module.exports = {
     	theme: {
     		extend: {
     			colors: {
     				primary: customTheme.colors.primary,
     				accent: customTheme.colors.accent
     			}
     		}
     	}
     };
     
           

Once you've completed these steps, your custom theme will be fully integrated into your application with Tailwind CSS!