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:

.. code-block:: javascript

    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'],
    }

.. admonition:: Note

    If you want to learn more about customizing tailwind, you can visit its `Adding Custom Styles <https://tailwindcss.com/docs/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:

.. code-block:: bash

    docker compose exec applocal npm run tailwind


.. admonition:: 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:

.. code-block:: scss
    
    @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:**

.. code-block:: bash

    docker compose exec applocal npm run start

**Production environment:**

.. code-block:: bash

    docker compose exec applocal npm run build

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