Configuration

ShipWithDjango uses Django Tailwind to seamlessly integrate Tailwind CSS into your Django project. This integration allows you to take full advantage of Tailwind's utility-first approach to styling while ensuring that it works smoothly within the Django ecosystem. For more detailed information on Django Tailwind, you can refer to the official documentation here.

The main configuration for Tailwind CSS in a ShipWithDjango project is located in theme/static_src/tailwind.config.js. This file allows you to customize Tailwind to better suit your project's design needs.

Example Configuration

Here’s an example of a minimal tailwind.config.js file, along with explanations of the different configuration options:

javascriptCopy code/**
 * This is a minimal config.
 *
 * If you need the full config, get it from here:
 * https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
 */

module.exports = {
    content: [
        /**
         * HTML. Paths to Django template files that will contain Tailwind CSS classes.
         */
        
        /*  Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
        '../templates/**/*.html',

        /*
         * Main templates directory of the project (BASE_DIR/templates).
         * Adjust the following line to match your project structure.
         */
        '../../templates/**/*.html',

        /*
         * Templates in other django apps (BASE_DIR/<any_app_name>/templates).
         * Adjust the following line to match your project structure.
         */
        '../../**/templates/**/*.html',

        /**
         * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
         * patterns match your project structure.
         */
        /* JS 1: Ignore any JavaScript in node_modules folder. */
        '!../../**/node_modules',
        /* JS 2: Process all JavaScript files in the project. */
        '../../**/*.js',

        /**
         * Python: If you use Tailwind CSS classes in Python, uncomment the following line
         * and make sure the pattern below matches your project structure.
         */
        '../../**/*.py'
    ],
    theme: {
        screens: {
            'xxs': '320px', // Added 'xxs' screen size
            'xs': '480px', // Added 'xs' screen size
            'sm': '640px',
            'md': '768px',
            'lg': '1024px',
            'xl': '1280px',
        },
        extend: {
            colors: {
                'default' : {
                    'DEFAULT': '#11181C',
                },
                'primary' : {
                    'DEFAULT': '#35b54a',
                    'light' : '#e1fde1',
                },
                'secondary' : {
                    'DEFAULT' : '#090e15',
                },
                'card' : {
                    'DEFAULT': '#141826',
                },
                'success' : {
                    'DEFAULT': '#22c55e',
                    'light': '#dcfce7',
                    'dark' : '#14532d',
                },
                'warning' : {
                    'DEFAULT': '#f97316',
                    'light' : '#ffedd5',
                    'dark' : '#7c2d12',
                },
                'error' : {
                    'DEFAULT': '#ef4444',
                    'light' : '#fee2e2',
                    'dark' : '#7f1d1d',
                }
            }
        },
    },
    plugins: [
        /**
         * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
         * for forms. If you don't like it or have own styling for forms,
         * comment the line below to disable '@tailwindcss/forms'.
         */
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
    ],
}

Configuration Options

1. Content

The content array defines the paths to all the files where Tailwind CSS classes will be used. This is crucial for the PurgeCSS feature, which removes unused CSS classes from the final build, making the output CSS file smaller and more efficient.

• Django Templates: Specify the paths to your Django template files, ensuring that Tailwind processes these files and includes the necessary classes in the final CSS.

• JavaScript Files: If you use Tailwind classes in your JavaScript, you can include those paths here to ensure that Tailwind picks up all the necessary classes.

• Python Files: If you use Tailwind classes in Python strings (e.g., in views or forms), you can include Python files as well.

2. Theme

The theme section allows you to customize the default Tailwind design system, including breakpoints, colors, fonts, and more.

• Screens: This defines custom screen sizes for responsive design. In the example, additional screen sizes (xxs and xs) are added for finer control over small screens.

• Extend: This is where you can extend the default Tailwind theme. For example, you can add custom colors that match your brand or project design.

  • Colors: Custom colors like primary, secondary, success, warning, and error are defined, which can then be used throughout your application to maintain a consistent color scheme. For example, you can use the class bg-primary to set the primary color as background or text-secondary to set the secondary color as text color. This way you can easily change the whole color scheme of your application with just a few config changes.

3. Plugins

Tailwind CSS comes with several official plugins that add more functionality to the framework. The example configuration includes:

• @tailwindcss/forms: Provides basic form styling. This can be commented out if you prefer to style forms manually.

• @tailwindcss/typography: Adds beautiful typographic defaults for rich text content.

• @tailwindcss/aspect-ratio: Provides utilities for controlling the aspect ratio of elements.

These plugins enhance the utility of Tailwind CSS and help you avoid writing repetitive CSS for common tasks like form styling and typography.

Customizing Tailwind CSS

You can further customize Tailwind CSS by modifying this configuration file to fit your project's needs. Whether you need to add more breakpoints, define new color schemes, or extend the framework with plugins, this configuration file is your starting point.

For a more detailed configuration and additional options, you can refer to the full Tailwind CSS configuration stub here.

By customizing the Tailwind configuration, you can ensure that your project maintains a consistent and unique design language that is tailored specifically to your needs.