Can you use Tailwind config file with Dash?

Dash Python
1

I’m trying to incorporate tailwind CSS into my app and would like to customize some base colors/themes. As per the tailwind documentation, the way to do this is by adding a tailwind.config.js file in the home folder.

However, since Dash reads local JS files only from the assets folder, this where I placed the file. With this setup, I was getting the following error:

ReferenceError: Can't find variable: modules

So, I tried to move the file to the home folder, and used DeferScript to manually load the file at the end. Still no luck, but the error has changed to the following:

SyntaxError: Unexpected token '<'

Has anyone successfully applied a config file for tailwind?

2

Update:

I should have done a better job reading the tailwind documentation. When using CDN, the config can directly be injected into javascript using the format:

tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
1 Like
3

I remember I used tailwind css back in 2019 for one of my app, it works well. They changed a fews thing with their last version though, regarding the settings.

4

Utilization of UI/UX designers is becoming more and more prevalent, if you get it worked out with tailwind, would you mind posting a small MRE to show others how it’s done? I myself would be curious as well.

I’d like to post it up on the https://dash-building-blocks.com/ site too

5

Hello,

I have a Dash project that I’ve been working on that uses Tailwind for all of the styling and is set up with the Tailwind CLI (using Node) as opposed to the Tailwind CDN. Its an app to allow me to test/experiment with and learn about Dash features. It is possible it might be helpful to someone so I decided to link my repo here:

Dash Test App
Dash version: 2.7.0
Tailwind version: 3.2.4

Within this repo there is a notes folder with two markdown files:

  1. data_project_installation_instructions.md
  • Explains how I set up the entire repo from the beginning (including creating the repo, environment, dev tools, etc). Specifically, there is a section labeled Optional Steps: If the plan is to include a website in the project. In this section I give instructions on how to set up a website including the directory structure and setting up tailwind. There is both a high-level overview section as well as a detailed section on how to complete these steps.
  1. data_project_workflows.md
  • Explains several different workflows that I’ve used in different contexts. In regards to Dash apps, the most important section is titled Dash App (Plotly Dash Website). This section explains how to run the app including the watch command for tailwind that will constantly look for changes to tailwind classes and recompile your css thus updating the styling of your app while its running.

Note: The structure of this project is not solely for websites or for prototyping, its sort of a generic project structure for any data project that I might do. Also, I don’t have time to write up much more than this post at the moment (although I can answer questions if anyone has any), but I do feel like the markdown notes I mentioned are detailed enough to provide some help.

I’m learning too and am sort of figuring this stuff out as I go so there may be better ways to do certain things, any feedback would be great. Good luck!

6

Are there any potential conflicts or compatibility issues that might arise when using a Tailwind config file with Plotly Dash?