65 lines
1.5 KiB
Markdown
65 lines
1.5 KiB
Markdown
# 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)
|