salona/docs/styling-guide.md

Styling Guide

Overview

This project uses Shadcn ui and Tailwind CSS for styling, integrated with the Vite 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:

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:

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

Apply the custom colors in your CSS or 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