tailwind purge of (daisy-generated) classes #3367

bluejabiru · 2025-01-07T11:43:23Z

bluejabiru
Jan 7, 2025

Hi All,

I have been using tailwindcss and daisyUI successfully for a couple of years now. All good on use and ease of development.

However, I am finally finding time to look at bundling -- webpack -- and the resulting size of the the CSS artifact. Unfortunately, it appears to be an "interplay" across the tailwind / daisyUI / webpack boundaries -- and issues are hard to trace.

Here's a loose description of symptoms I am seeing -- I am looking for ideas and suggestions.

I have defined tailwind to use only a very limited set of colors: white, black and red. The remainder of colour palettes are configured as part of daisy themes -- using explicit hex/rgb values.

But what I am seeing -- when daisy.css is generated (using a daisy-prefix of "dui-"), I am ending up with classes for the full tailwind colour palette! For example: "dui-border-lime-100" (through to 'dui-border-lime-800'), "dui-bg-lime-..." etc. etc. for colours such as "amber", "indigo" etc. When, in fact, I don't use lime, amber of indigo in any of my themes.

That might be acceptable...

But, then, when tailwind is meant to purge said "unused" classes -- it simply does not seem to work. And the resulting .css contains the full set of limes and ambers.

Of course, and I didn't explicitly mention this, all of my other classes, customisations, themes, etc. work just fine. It is just that I am ending up with an very oversized css artifact. And colours may not be the only unused bits and pieces -- just the obvious ones.

Thoughts? Comments? Much appreciated.

--olaf

saadeghi · 2025-01-07T21:17:44Z

saadeghi
Jan 7, 2025
Maintainer

when daisy.css is generated (using a daisy-prefix of "dui-"), I am ending up with classes for the full tailwind colour palette! For example: "dui-border-lime-100" (through to 'dui-border-lime-800'), "dui-bg-lime-..." etc. etc. for colours such as "amber", "indigo" etc. When, in fact, I don't use lime, amber of indigo in any of my themes.

lime, amber, etc are Tailwind CSS colors, not daisyUI colors. I think you're talking about Tailwind CSS prefix, not daisyUI prefix

And having all colors in the production is not expected behavior. You should have border-lime-100 only if you use the exact same class name in your HTML.

I'm guessing the content array in your tailwind.config.js is addressing to the wrong paths. Can you share a minimal reproduction link?

0 replies

bluejabiru · 2025-01-07T22:04:26Z

bluejabiru
Jan 7, 2025
Author

Here's my tailwind.config.js:

const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    content: [
        "./templates/**/*.html",
    ],
    theme: {
        fontFamily: { 
         ....
        },
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            white: colors.white,
            red: colors.red,
            black: colors.black,
        },
        screens: {

Now, the daisy config:

const colors = require("tailwindcss/colors");

module.exports = {
    prefix: "dui-",
    content: [
        "./templates/**/*.html",
    ],
    safelist: [
      ...
    ],
    plugins: [
        require("daisyui")
    ],
    daisyui: {
        styled: false,
        themes: [
            {
                "cml": {
                    "primary": "#7EB928",
                    ...
                    "secondary": "#792A85",
                    ...
...
}

It seems clear to me that the tailwind purge may well be working correctly. However, the "root" cause might be that the "lime-" colours already appear in the daisy.css -- which I include in tailwind's styles_components.css.

I have the feeling that my issue may not be in the daisy.css generation per se, but in my configuration of styles_components.css, styles_base.css -- where I not only "extend" / "modify" (e.g.) the "dui-" styles, but also define my own styles. So, in those files, I make use of (e.g.) "dui-link-accent" using @apply.

1 reply

saadeghi Jan 7, 2025
Maintainer

What are these styles_components.css and styles_base.css files?
When you apply a class name like

.xyz{
  @apply bg-red-50;
}

.xyz will be in your production CSS always. It's no going to be generated on demand, as you are extending some styles and you're introducing it to Tailwind as a CSS class name you want, so Tailwind is going to send it as it is to production CSS.

Only Tailwind's utility classes (like m-10, grid, etc) and class names coming from plugins (like btn-primary of daisyUI) are the one that will be generated on demand, not all the styles you put in a CSS file.

bluejabiru · 2025-01-07T23:37:40Z

bluejabiru
Jan 7, 2025
Author

styles_components.css -- holds tailwind's @layer components classes; styles_base.css holds the tailwind @layer base classes.

Based on your comments, I will go back to the drawing board -- back to first principle -- and see if I can work out exactly what is happening.

You did not comment re. the use of the "prefix" option.

In the above "daisy configuration", where should the "prefix" go? straight under the module.exports? or, as part of the daisyui: configuration?

1 reply

saadeghi Jan 7, 2025
Maintainer

If you want Tailwind's prefix
https://tailwindcss.com/docs/configuration#prefix

module.exports = {
  prefix: 'tw-',
}

all tailwind classnames must like tw-m-10 etc.

If you want prefix only for daisyUI class names only
https://daisyui.com/docs/config/

module.exports = {
  daisyui: {
    prefix: 'daisy-',
  }
}

all daisyUI class names would be like daisy-btn etc.

So the code snippet you shared

module.exports = {
    prefix: "dui-",

is actually a prefix for Tailwind (All Tailwind class names, including daisyUI), not daisyUI class names only.

I can help better if you share your setup because I suspect you are over engineering many things in your CSS files which may not be the best idea.

bluejabiru · 2025-01-08T01:17:36Z

bluejabiru
Jan 8, 2025
Author

ok... here's a very cut-down version -- bear with me re. a few bits and pieces left (from the original):

test_tailwind.html:

<div class="py-4 lg:px-10">
    <div class="flex flex-col gap-4 lg:flex-row dui-bg-primary">
        <p>One</p>
        <p>Two</p>
    </div>
</div>

tailwind.config.js:

const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    content: [
        "./templates/test_tailwind.html",
    ],
    theme: {
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            white: colors.white,
            red: colors.red,
            black: colors.black,
        },
        screens: {
            xs: "375px",
            xs2: "455px",
            ...defaultTheme.screens
        },
        extend: {
            colors: {
                red: {
                    lightest: colors['red']['200'],
                    light: colors['red']['400'],
                    DEFAULT: colors['red']['600'],
                    dark: colors['red']['700'],
                    darkest: colors['red']['800'],
                },
            },
        },
    },
    plugins: [
        require('@tailwindcss/aspect-ratio'),
    ],
}

tailwind_daisy.config.js:

const colors = require("tailwindcss/colors");

module.exports = {
    prefix: "dui-",
    content: [
        "./templates/test_tailwind.html",
    ],
    plugins: [
        require("daisyui")
    ],
    corePlugins: {
        preflight: false,
    },
    daisyui: {
        themes: [
            {
                "cml": {
                    "primary": "#7EB928",
                    "primary-focus": "#94D436",
                    "primary-content": "#11333f",
                    //
                    "secondary": "#792A85",
                    "secondary-focus": "#9233A0",
                    "secondary-content": colors["white"],
                    //
                    "accent": "#21B6C7",
                    "accent-focus": "#57D5E3",
                    "accent-content": colors["white"],
                    //
                    "neutral": "#11333f",
                    "neutral-focus": "#1E5A6F",
                    "neutral-content": colors["white"],
                    //
                    "base-100": colors["white"],
                    "base-200": "#f2f2f2",
                    "base-300": "#e6e6e6",
                    "base-content": "#11333f",
                    //
                    "success": "#21B6C7",
                    "success-content": "#11333f",
                    //
                    "info": "#21B6C7",
                    "info-content": colors["white"],
                    //
                    "warning": "rgb(255, 193, 7)",
                    "warning-content": colors["black"],
                    //
                    "error": colors["red"]["700"],
                    "error-content": colors["white"],
                    //
                    "--rounded-box": "0.5rem",
                    "--rounded-btn": "0.5rem",
                    "--btn-text-case": "capitalize",
                    "--border-btn": "0px",
                },
            },
        ],
    },
}

webpack.common.js:

const path = require('path');
const BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const DJANGO_STATIC_ROOT = '/static/';
const STATIC_WEBPACK_DIR = DJANGO_STATIC_ROOT + 'webpack/';

module.exports = {
    entry: {
        common: {
            import: [
                "./myop/assets/css/daisy.css",
            ],
            library: {
                name: 'common',
                type: 'window'
            }
        },
    },
    output: {
        publicPath: STATIC_WEBPACK_DIR, // seems to be needed to make `webpack_asset` work correctly...
        path: path.resolve(__dirname, "." + STATIC_WEBPACK_DIR), // a relative dir (!)
        filename: "[name].[contenthash].js", // would give us, e.g., common.f300e9d1ebc5f0a5fd5c.js
        clean: true,
    },
    resolve: {
    },
    plugins: [
        new BundleTracker({
            filename: 'webpack-stats.json', // this file is picked up and used by django-webpack-loader...
        }),
        new MiniCssExtractPlugin({
            filename: "[name].[contenthash].css",
        }),
    ],
    module: {
        rules: [
            {
                test: /\/css\/\S+\.css/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        },
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: {
                                    "url": false,
                                    "postcss-import": {},
                                    "tailwindcss": {
                                        config: './myop/assets/css/tailwind.config.js'
                                    },
                                    "autoprefixer": {}
                                },
                            },
                        },
                    },
                ],
            },
        ]
    },
    optimization: {
        minimize: false,
    },
};

and... lastly, here's the build output:

rm -rf static/webpack/*; npm run build:dev

> [email protected] build:dev
> npm run build:daisy && webpack --config ./webpack.dev.js --node-env development --watch


> [email protected] build:daisy
> tailwindcss -c ./myop/assets/css/tailwind_daisy.config.js -o ./myop/assets/css/daisy.css


Rebuilding...

🌼   daisyUI 4.12.14
├─ ✔︎ 1 theme added		https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project:	https://opencollective.com/daisyui


Done in 298ms.
asset common.3428f24f9f79c8ed7463.css 7.11 KiB [emitted] [immutable] (name: common)
asset common.bf6c123cf6c3fa618dab.js 2.18 KiB [emitted] [immutable] (name: common)
Entrypoint common 9.28 KiB = common.3428f24f9f79c8ed7463.css 7.11 KiB common.bf6c123cf6c3fa618dab.js 2.18 KiB
orphan modules 9.32 KiB (javascript) 937 bytes (runtime) [orphan] 7 modules
runtime modules 274 bytes 1 module
cacheable modules 50 bytes (javascript) 6.58 KiB (css/mini-extract)
  ./myop/assets/css/daisy.css 50 bytes [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./myop/assets/css/daisy.css 6.58 KiB [built] [code generated]
webpack 5.97.1 compiled successfully in 520 ms

Bottom Line (round 1) -- the prefix:

Essentially, all looking good -- no "lime-", no "amber-".

That said, as you'll notice, I have the prefix: "dui-" specified (in the taiilwind_daisy.config) directly underneath the module.exports. Not doing that (i.e. putting it under the daisyui config), picked up the tailwindcss classes (into daisy.css) but not the dui-bg-primary.

3 replies

saadeghi Jan 8, 2025
Maintainer

Can you share a minimal reproduction link please?

Not doing that (i.e. putting it under the daisyui config), picked up the tailwindcss classes (into daisy.css) but not the dui-bg-primary.

It's expected behavior that daisyUI prefix doesn't add prefix to bg-primary.
primary is a daisyUI color name but bg-primary is not a daisyUI class name. bg- is a utility class Tailwind generates for all colors. daisyUI adds component class names (like btn, card), these are the class names daisyUI can control, before passing them to Tailwind CSS as a plugin. But for colors, we just add primary, secondary, etc as color to Tailwind, and then Tailwind generates utility classes for them like other colors.

bluejabiru Jan 11, 2025
Author

Ouch!

I suspect that should be made clearer in the doco...

Intuition told me that anything and everthing that was "determined" by daisyUi would end up with the daisyUi "prefix". That colours (and, I suspect, a few others in the same bucket) will still be considered "tailwind" classes is news.

Unfortunately, we now have heaps and heaps of "dui-bg-primary" (etc. etc.) lying around.

No real damage, though -- as the prefix configuration straight under module.exports works just fine for us.

saadeghi Jan 11, 2025
Maintainer

I suspect that should be made clearer in the doco...

It is in docs:
https://daisyui.com/docs/config/#prefix

Utility classes like color names (e.g. bg-primary) or border-radius (e.g. rounded-box) will not be affected by this config because they're being added as extensions to Tailwind CSS classes.

Unfortunately, we now have heaps and heaps of "dui-bg-primary" (etc. etc.) lying around.

If you are using Tailwind's prefix I would suggest something other than dui- because that config is not related to daisyUI and daisyUI can not control it. I suggest something like tw- so it doesn't create a confusion in your codebase.

bluejabiru · 2025-01-11T01:44:28Z

bluejabiru
Jan 11, 2025
Author

Otherwise... back to my original problem of picking up all sorts of colors that aren't in use by me...

That has been resolved. Except... please don't ask as to how -- as I simply don't know!

I went back and started from "blank" configurations both tailwind, daisy and our own css (with imported npm modules) etc., followed the tailwind, daisy, webpack instructions -- all of which I thought I had done previously -- and all looks in shape now. All good.

Lastly, big thanks for your quick response(s), saadeghi. Much appreciated.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

tailwind purge of (daisy-generated) classes #3367

{{title}}

Replies: 5 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

tailwind purge of (daisy-generated) classes #3367

bluejabiru Jan 7, 2025

Replies: 5 comments · 5 replies

saadeghi Jan 7, 2025 Maintainer

bluejabiru Jan 7, 2025 Author

saadeghi Jan 7, 2025 Maintainer

bluejabiru Jan 7, 2025 Author

saadeghi Jan 7, 2025 Maintainer

bluejabiru Jan 8, 2025 Author

saadeghi Jan 8, 2025 Maintainer

bluejabiru Jan 11, 2025 Author

saadeghi Jan 11, 2025 Maintainer

bluejabiru Jan 11, 2025 Author

bluejabiru
Jan 7, 2025

Replies: 5 comments 5 replies

saadeghi
Jan 7, 2025
Maintainer

bluejabiru
Jan 7, 2025
Author

saadeghi Jan 7, 2025
Maintainer

bluejabiru
Jan 7, 2025
Author

saadeghi Jan 7, 2025
Maintainer

bluejabiru
Jan 8, 2025
Author

saadeghi Jan 8, 2025
Maintainer

bluejabiru Jan 11, 2025
Author

saadeghi Jan 11, 2025
Maintainer

bluejabiru
Jan 11, 2025
Author