Skip to content

Styling & Tailwind

PowerCRUD ships with daisyUI/Tailwind defaults but you can bring your own CSS framework or customise tables/buttons/layout. This chapter covers the common knobs and Tailwind integration; deeper options live in the reference.

1. Choose a framework

# settings.py
POWERCRUD_SETTINGS = {
    "POWERCRUD_CSS_FRAMEWORK": "daisyui",   # default
}
  • daisyUI (Tailwind v4) is the maintained path.
  • Custom frameworks are possible by copying templates (see Customisation tips) and wiring in a new pack.

2. Table and button styles

class ProjectCRUDView(PowerCRUDMixin, CRUDView):
    model = models.Project

    table_classes = "table-zebra table-sm"
    action_button_classes = "btn-xs"
    extra_button_classes = "btn-sm btn-primary"
  • table_classes appends to the base table class.
  • action_button_classes targets edit/delete/etc. buttons per row.
  • extra_button_classes targets the buttons above the table.

Column size controls

table_max_col_width = 30                   # characters
table_header_min_wrap_width = 15
table_pixel_height_other_page_elements = 100
table_max_height = 80                      # percent of remaining viewport

These values control truncation/popovers and scrollable table height.

dropdown_sort_options affects choices in forms, filters, and bulk editing (see Bulk editing (synchronous)).

3. Tailwind integration

Tailwind’s JIT needs to see the CSS classes PowerCRUD uses. Choose one of the methods below.

Method A · Import package source

/* your tailwind.css */
@import "tailwindcss";
@source "/path/to/site-packages/powercrud";

Find the exact path in a shell:

python manage.py shell
>>> import powercrud
>>> powercrud.__path__
['/venv/lib/python3.13/site-packages/powercrud']

Method B · Safelist generator

  1. Configure output location:
POWERCRUD_SETTINGS = {
    "TAILWIND_SAFELIST_JSON_LOC": "config/powercrud/",
}
  1. Generate the safelist:
python manage.py pcrud_extract_tailwind_classes --pretty
  1. Reference it in tailwind.config.js:
module.exports = {
  content: [
    "./templates/**/*.html",
    "./powercrud/**/*.html",
  ],
  safelist: require("./config/powercrud/powercrud_tailwind_safelist.json"),
};

Re-run the command whenever you upgrade PowerCRUD or adjust templates heavily.

4. External assets

Ensure your base template includes:

  • HTMX script.
  • Popper.js (for truncated-table popovers).
  • Optional: tablesort or Alpine.js if you use them.

PowerCRUD does not ship a full HTML shell; instead, your project must define its own base template (for example, see the sample app’s sample/templates/sample/daisyUI/base.html) and point base_template_path at it.

Key options

Setting Default Typical values Purpose
POWERCRUD_CSS_FRAMEWORK 'daisyui' 'daisyui', custom pack name Choose the styling stack.
table_classes, action_button_classes, extra_button_classes '' CSS classes Style tables and buttons.
table_max_col_width, table_header_min_wrap_width 25, same as max integers Control column widths and truncation.
table_max_height, table_pixel_height_other_page_elements 70, 0 integers Limit table height and scroll behaviour.
dropdown_sort_options {} dict Order entries in dropdowns.
TAILWIND_SAFELIST_JSON_LOC None path Where to write the Tailwind safelist.

See the configuration reference for full details.

Next steps