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

background, border and text colors are added to the safe list.

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

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

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:

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

	// you also need to add hsl representation of the colors
	--primary-color-raw: 142.13deg 76.22% 36.27%;
	--secondary-color-raw: 198.63deg 88.66% 48.43%;
	// .. add other colors here
}

You can access builtin tailwind colors using theme() function.

body {
	--primary-color: theme("colors.indigo.600");
	--secondary-color: theme("colors.sky.500");
	// .. add other colors here
}

Extending Tailwind Settings

To extend or override the default Tailwind CSS configuration, create a tailwind.config.js file in the root folder of your project. You can add your custom configurations to this file or override the existing configurations.

import type { ModuleOptions } from '@nuxtjs/tailwindcss';
export default <Partial<ModuleOptions['config']>>{
	theme: {
		extend: {
			maxWidth: {
				section: '40rem',
			},
			// ... add other custom configurations here
		}
	}
}