Tailwind CSS

Safḥa uses Tailwind CSS for styling. It is a utility-first CSS framework that provides low-level utility classes to build custom designs.

Customizing Tailwind CSS

Safḥa uses provides a set of tailwind configurations and integrates a number of plugins to create a consistent design.

Colors

Safḥa uses 6 colors for styling. The colors are:

• primary: sky-600
• secondary: violet-600
• success: green-600
• info: cyan-600
• danger: rose-600
• warning: amber-600

Additionally, these colors are accessible through CSS variables. You can use them in your custom CSS or SCSS files. The variables are:

• --color-primary
• --color-secondary
• --color-success
• --color-info
• --color-danger
• --color-warning

To override these colors follow the steps below:

1. Create a tailwind.css file in the assets/css folder.
2. add the following code to the file:

@theme {
	--color-primary: #410941;
	--color-secondary: #0c4b42;
	// .. add other colors here
}

You can access builtin tailwind colors using css var

@theme {
	--color-primary: var(--color-indigo-600);
	--color-success: var(--color-sky-500);
	// .. add other colors here
}