Frontend

Application Ui & Tailwindcss

The Django templates use TailwindCSS a utility framework for styling and creating components. Styling is applied directly in your HTML to compose new components.

Configuration

This project uses the Tailwind CLI alongside postcss without the use of an additional build tool.

The relevant configuration file is:

tailwind.config.js - tailwind specific including plugins such as tailwindforms

The package.json file includes the necessary scripts to build your styles during development.

  "scripts": {
    "watch": "npx tailwindcss -i ./assets/css/app.css  -o ./static/css/app.css --watch",
    "build": "NODE_ENV=production npx tailwindcss -i ./assets/css/app.css  -o ./static/css/app.css",
  }

How it works

The workflow during development:

/static/css/app.css is referenced in your project’s main template i.e. base.html .

tailwind components and utilities are included in ./assets/css/app.css

@tailwind base;
@tailwind components;

/** None layer styles https://tailwindcss.com/docs/content-configuration **/

@tailwind utilities;

@layer components {

  /* form fields */
  input[type=number],
  ....

}

running npm run watch will watch for changes in both the app.css file as well as your project html files.
the tailwind cli will rebuild the necessary css and save it to /static/css/app.css
your Django server will then take over from this point and serve the files

Docker for local development

If using docker there are no additional steps necessary.
When you bring the stack up it also starts a node container which will build your styles and watch for any changes during development.

Development without docker

You will need to run npm install to install the required packages.
During development run npm run watch to build and compile

The workflow before deploying to production:

before deploying to production, run npm run build to compile your production ready CSS. If you are deploying with docker this will be done for you.

UI Components

We are compiling a set of UI components to help you get started quickly.

Vanty UI Design →

There are plenty of open source tailwind component libraries to use.

Flowbite - Open Source Tailwind Library, Includes Components & Templates →

Docs