# Styling Guide

## Overview

This project uses [Shadcn ui](https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/) for styling,
integrated with the [Vite](https://vitejs.dev/) build tool. This guide explains
how to customize the theme fonts and colors in a Tailwind CSS project set up
with Vite. Tailwind CSS allows for easy theme customization through the
`tailwind.config.js` file.

## Customizing Fonts

### Changing Default Fonts

To change the default fonts, modify the `fontFamily` key in the `theme` section
of `tailwind.config.js`:

```javascript
module.exports = {
  theme: {
    fontFamily: {
      vazirmatn: ['Vazirmatn', 'tahoma', 'sans-serif'],
      nastaliq: ['IranNastaliq', 'Vazirmatn', 'tahoma', 'sans-serif'],
      boblious: ['Boblious', 'Vazirmatn', 'tahoma', 'sans-serif'],
      hayat: ['Hayat', 'Vazirmatn', 'tahoma', 'sans-serif'],
      digiMadasi: ['DigiMadasi', 'Vazirmatn', 'tahoma', 'sans-serif'],
    },
  },
  plugins: [],
};
```

### Customizing Colors

Update `tailwind.config.js` to include custom colors:

```ts
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '....',
        secondary: '....',
        accent: '....',
        // Add more custom colors as needed
      },
    },
  },
  plugins: [],
};
```

Apply the custom colors in your CSS or HTML:

```html
<div className="bg-primary text-white">
  This div has a custom primary background color.
</div>
<button className="bg-accent text-white">Accent Button</button>
```

---

[Go back to Readme](../README.md)