Using already existing V4 configuration with Tailwind CDN

[mitoiscool]

I'm using TailwindCSS 4 with Flask. I realized that when using custom builds of tailwind and actively debugging I need to rebuild it or styles wont always update. Hence, I've written this code:

{% if debug %}
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <style>
        @import url("{{url_for('static', filename='css/main.css')}}");
    </style>
    {% else %}
    <link rel="stylesheet" href="{{url_for('static', filename='css/output.css')}}">
    {% endif %}

The flask/jinja code here doesn't really matter. If it is not clear what I am trying to do here, I just want to import the tailwind cdn during 'debug' mode. However, I can't figure out how to reference my already existing tailwind config file to be used with this.

Anyone have any idea of how I can do this? Is it possible? I know the one obvious solution is to just paste my main.css, containing my config info, into <style> tags, however this seems clunky and not as automated as I'd like. Note, I've already tried importing it through .

[janet23wolf]

To streamline your development process with TailwindCSS and Flask, you can use the TailwindCSS CDN during debug mode while still leveraging your existing Tailwind configuration. However, direct referencing isn't straightforward with the CDN. Instead, create a custom build script to generate a development version of your Tailwind CSS file with your customizations. Update your tailwind.config.js to specify the content paths and theme customizations. Install TailwindCSS and PostCSS CLI, then create a script to build your custom CSS file. Finally, update your Flask template to conditionally use this Patient Portal generated CSS file during debug mode, ensuring your custom styles are applied without manually embedding them in <style> tags. This approach allows for automation and maintains your configuration seamlessly.