Tailwind CSS

As of version 2022.8 Pegasus officially supports Tailwind CSS (Version 3).

Demo and Overview

Here’s a quick overview of using TailwindCSS in Pegasus

Development

Because TailwindCSS only includes the styles found in your HTML / JavaScript files, you will need to actively rebuild your CSS files any time you add new styles/components to your templates. The easiest way to do this is by running (after installing Node packages):

npm run dev-watch

Or in Docker:

make npm-watch

See the front-end docs for more information about working with these files.

Customization

Pegasus uses daisyUI to provide default, well-styled components with convenient CSS classes. Components from daisyUI can be brought in as needed by your app. A full list of available components can be found at the daisyUI component library.

Changing your themes

If you enable dark mode, Pegasus will ship with the default DaisyUI light and dark themes which are used for regular and dark mode, respectively. But DaisyUI offers a number of out-of-the-box themes you can use in your Pegasus app. To change themes, make sure the theme is enabled in your tailwind.config.js’s daisyui section, and specify the default dark mode theme if necessary:

module.exports = {
  // changes the themes to "cupcake" and "coffee"
  daisyui: {
    themes: ["cupcake", "coffee"],
  },
  // sets the "coffee" theme as the one used for dark mode
  darkMode: ["class", '[data-theme="coffee"]'],
}

After changing these values you will have to rebuild your front end.

Finally, you will also have to update the default themes in your settings.py:

LIGHT_THEME = "cupcake"
DARK_THEME = "coffee"

After this, your app should be fully styled in the new themes!

For a list of the available themes, and information about creating your on theme, see the daisyUI theme documentation and their online theme generator.

Extending themes

If you’d like to extend one of the built-in themes you can do that in your tailwind.config.js file.

For example, add a section like this to set custom primary and secondary colors for light and dark mode.

daisyui: {
  themes: [
    {
      light: {
        ...require("daisyui/src/theming/themes")["light"],
        primary: "#0c2340",
        secondary: "#bd3039"
      },
      dark: {
        ...require("daisyui/src/theming/themes")["dark"],
        primary: "#bd3039",
        secondary: "#0c2340"
      }
    },
  ],
},

Other products / themes

shadcn

shadcn/ui is a React component library for Tailwind. It includes many out-of-the-box components that you can install and use in your projects.

As of version 2024.11 Pegasus ships with a demo dashboard using shadcn. To enable the dashboard you have to build with the Tailwind CSS framework and check the “Use Shadcn” checkbox in your project settings.

Here’s a screenshot:

The dashboard is a hybrid single-page React app served by Django. It uses the same colors as the DaisyUI theme, and will update when you change your theme, and has many interactive components. However it is not connected to any backend data—it is just a UI example.

Working with shadcn

The dashboard can be found in assets/javascript/shadcn-dashboard. Shadcn components are stored in the assets/javascript/components/ui folder.

Components can be imported in other JavaScript files using the same import path syntax used by the dashboard:

import { Button } from "@/components/ui/button"

You can use the shadcn cli to create components, however it currently creates them in the wrong folder (this is surprisingly hard to change). So adding a component is a two step process:

npx shadcn@latest add badge
mv components/ui/* assets/javascript/components/ui/

After that you should be able to import and use your component in your React code.

Flowbite

Flowbite is a library with many great UI components—most of which are free and open source. Also, unlike shadcn, it does not use React—making it a great fit for Django templates and htmx projects.

As of version 2024.11 Pegasus ships with the option to enable flowbite, along with a page demonstrating some sample components. To enable Flowbite, choose Tailwind CSS and check the “Use Flowbite” checkbox in your project settings.

If you enable this setting, flowbite will automatically be installed and you can drop flowbite components into any Django template. The reference page has an example of a few of these components.

Tailwind UI

Tailwind UI is a great product for building more complex pages, including marketing sites and app UIs. It another great option for getting help with UI components and pages, and should integrate seamlessly with the current Pegasus templates.

Note that you will have to rebuild styles when adding TailwindUI components, as described in the “Development” section above.

Troubleshooting

Styles aren’t working after adding new components

Every time you use a new Tailwind class you need to rebuild your front end as described in the “Development” section above.

After doing that, if they are still not showing up, be sure that you have hard-refreshed your browser (Ctrl-Shift-R) on most browers. You can also disable browser caching when devtools are open by following these instructions for Chrome or for Firefox.

If you are building your front end in Docker, be sure to also read the troubleshooting section of the front end documentation for potential issues with cross-platform compatibility.