Example - how to set up a Dash App with Tailwind styling using the Tailwind CLI (as opposed to the CDN)


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!