Documentation
Guides
Customization

## TailwindCSS

As per the official page of Tailwind CSS, it is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

To simply put, Tailwind provides helper classes for almost every CSS rule available.

Fuse includes and uses Tailwind whenever it's possible. There are no traditional styles available within the Fuse, Though there are edge cases that cannot be styled using Tailwind, 99% of the Fuse is styled using Tailwind.

## Configuration

To use Tailwind, you don't need to do any setup as all Tailwind classes can be accessible from any HTML file you create by default.

Tailwind configuration can be found in `/src/tailwind.config.js` file. This file is used to configure the generated classes by Tailwind. We already configured the Tailwind using the config file to provide sensible defaults for a web app.

## Tailwind and Fuse

Fuse also uses Tailwind as its main configuration source for Angular Material components. Basically, some of the Tailwind configuration is exported during the Tailwind's build process and made available for Fuse's internal use cases. This allows Fuse to use Tailwind's configuration as the single source of truth.

To summarize; if you want to add/edit/remove any color, change the font families, modify the breakpoints or change any other visual configuration, you have to do that via the Tailwind's config file and they will be carried over to the Angular Material components.

## Building Tailwind

Since Angular v11, Tailwind support has been added into the AngularCLI so you don't have to do anything to build Tailwind.

## Official docs

Official Tailwind CSS documentation: https://tailwindcss.com/