Skip to main content

CSS

We already import and config Tailwind CSS in our frontend project, you can use it directly.

SCSS​

For some people who want to add custom css classnames, you can use SCSS.

You can create custom SCSS files under frontend/src/styles directory and add it in frontend/src/styles/index.scss

For example

.alert {
  @apply rounded;
  @apply text-gray-700 bg-gray-100;
  @apply p-4;
  @apply text-sm;
}

JIT​

Tailwind v3 use JIT by default, if some css styles are missing, please edit tailwind.config.js and set pySitePackages env variable.

You can check https://python-webpack-boilerplate.readthedocs.io/en/latest/setup_with_tailwind/#jit to learn more.

Live Reload​

When you add Tailwind css class in Django template, it would be cool if the page can auto live realod

SaaS Hammer supports it by default, please use npm run start to run webpack dev server (not npm run watch), then it should work.

tip

In SaaS Hammer, we already built some components for developers to use directly or customize if they want.

You can check Component Library to learn more.