CSS

Tailwind

Django Easystart uses tailwindcss https://tailwindcss.com/ as the main CSS framework because it is easy to customize, adapts to any design, and generates a small build size.

Tailwind uses its configuration file tailwind.conf.js, where you can modify styles or add new properties, extensions or variants to them. This allows you to centralize the main styling configuration of the application in a single file, allowing you to make substantial changes to the design of your application quickly.

In Easystart, we take advantage of this magic to establish the main color scale of the application:

module.exports = {
    theme: {
        extend: {
            colors: {
                app: {
                '50': '#f0fdf4',
                '100': '#dcfce7',
                '200': '#bbf7d0',
                '300': '#86efac',
                '400': '#4ade80',
                '500': '#22c55e',
                '600': '#16a34a',
                '700': '#15803d',
                '800': '#166534',
                '900': '#14532d',
                },
            },
        },
    },
    variants: {
        extend: {

        },
    },
    plugins: [
        require('@tailwindcss/forms'),
    ],
    content: ['./frontend/src/**/*.vue'],
}

Note

If you want to learn more about customizing tailwind, you can visit its Adding Custom Styles section.

Once the configuration file is defined, the next step would be to generate the .css file. In Easystart, a command has been established that you can execute with npm to create or update the tailwind.css file with the styles used in the application. This file will be inserted into the static/css directory. With the environment running, execute:

docker compose exec applocal npm run tailwind

Note

To clarify, the file generated from the command tailwind.css only includes the necessary classes used by the application.

If you add a new class that you haven’t used before, you will need to run the command again to update the tailwind.css file. This ensures that the file always contains the latest styles needed by the application.

Custom CSS

If the tailwind styles are not enough, don’t worry, you can also add styles in the usual way. We have provided a custom.css file for you to define your own classes.

Suppose you want to add a new behavior using CSS and the tailwind configuration does not offer the possibility of adding it, go to the custom.css file and add it there. This way it will be available to be used within the app.

Adding external styles

All .css files are centralized in static/css/app.postcss, which is detected by webpack when generating the application build. If you installed a package that contains its own styles for proper execution, you can add it there and it will be applied. An example would be:

@import "intl-tel-input/build/css/intlTelInput.css";
@import "./tailwind.css";
@import "./custom.css";
@import "vue-select/dist/vue-select.css";

How style changes are deployed

To apply the style changes, you need to generate the application build. There are two ways to do this:

Development environment:

docker compose exec applocal npm run start

Production environment:

docker compose exec applocal npm run build

Note

In the development environment, the watch mode is activated, so every modification in the .css files will be built immediately.