Customization

Tailbreeze is built using the latest web technologies and is highly customizable. Discover the foundation on which its style system is constructed.

Tailwind CSS

The Tailbreeze’s style system is mainly built on top of Tailwind CSS. It is a utility-first CSS framework for rapidly building custom user interfaces. 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.

Tailbreeze adopts a utility-first approach where all design components are constructed using Tailwind’s utility classes, while any additional elements that are beyond are coded using SCSS.

SCSS

SCSS is used for creating all custom styles that are beyond the scope of utility styles. These custom styles are organized in a modular fashion to facilitate easy discovery and updates of the styles.

app.scss
scss/
    ├── abstract/
    │       ├── _mixins.scss
    │       └── _variables.scss
    ├── base/
    │       ├── _base.scss
    │       ├── _code.scss
    │       └── _font.scss
    ├── components/
    │       ├── _buttons.scss
    │       ├── _card.scss
    │       ├── _caret.scss
    │       ├── _carousel.scss
    │       ├── _datepicker.scss
    │       ├── _dropdown.scss
    │       ├── _form.scss
    │       ├── _model.scss
    │       ├── _nav.scss
    │       ├── _table.scss
    │       └── _tooltips.scss
    ├── layout/
    │       ├── _header.scss
    │       ├── _main.scss
    │       └── _sidebar.scss
    ├── misc/
    │       ├── _print.scss
    │       └── _scrollbar.scss
    ├── page/
    │       ├── _website-analytics.scss
    │       └── ...
    ├── theme/
    │       └── _theme.scss
    └── vendors/
            ├── _chartjs.scss
            ├── _jsvectormap.scss
            ├── _material-symbols.scss
            ├── _simplebar.scss
            ├── _sweetalert2.scss
            ├── _tailwins.css
            └── ...

In order to ensure consistency in pixel-perfect design across the template, we use Tailwind’s @apply directive to extract utility values in most cases. Her’s what an example custom class might look like using @apply directive to compose it from existing utilities.

.button {
    @apply px-5 mb-3 text-sm bg-primary text-white;
}

Font

Tailbreeze uses Roboto as the default font for both body copy and headings. It’s a google font from https://fonts.google.com/specimen/Roboto. For monospace, SFMono-Regular is used.

Font

If you want to change the default font to any other:

  1. Copy your new web-font files to /app/src/assets/fonts/
  2. Include the @font-face rule in /app/src/assets/scss/base/_font.scss/
  3. Update the fontFamily entry in tailwind.config.js

Example:

...
fontFamily: {
    sans: ["noto-sans", "sans-serif"],
    ...
},
...