Hello,

I just upgraded to v2, and saw that my whitelist do not work anymore.
And looking at the new tailwind.config.js i can't find a way to put my specific conf (I'm a tailwind/purgecss noob).

This what was working fine in v1.
Any tip/advice for adapting the v2 conf file ? Thanks.

// Source : https://github.com/bep/hugo-starter-tailwind-basic/blob/master/tailwind.config.js
// Modified for better whitelisting (bootstrap/venobox, ...)

const theme = require('tailwindcss/defaultTheme');
const typography = require('@tailwindcss/typography');

//const colorBrand = 'var(--color-pretty)';

// Utils
const round = (num) => num.toFixed(7).replace(/(\.[0-9]+?)0+$/, '$1').replace(/\.0$/, '');
const rem = (px) => `${round(px / 16)}rem`;
const em = (px, base) => `${round(px / base)}em`;
const px = (px) => `${px}px`;

module.exports = {
	important: true, // See https://tailwindcss.com/docs/configuration#important
	experimental: {
		// See https://github.com/tailwindlabs/tailwindcss/pull/2159
		applyComplexClasses: true
	},
	purge: {
		enabled: process.env.HUGO_ENVIRONMENT === 'production',
		content: [ './hugo_stats.json' ],
		mode: 'all',
		options: {
         //whitelist: [ 'pl-1', 'pl-3' ],
         whitelistPatterns: [
            // pour AOS plugin (Tested OK)
            /data-aos/,
            /data-aos^/,
            /^fade/,
            /^flip/,
            /^aos/,
            // pour bootstrap (Tested OK)
            /^btn-/,
            // pour MsgBox bootstrap (Tested OK)
            /show/,
            // pour venobox (Tested OK)
            /data-autoplay/,
            /data-vbtype/,
            /venoframe/,
            /vbvid/,
            /vbox-open/,
            /vbox-overlay/,
         ],
			defaultExtractor: (content) => {
				let els = JSON.parse(content).htmlElements;
				els = els.tags.concat(els.classes, els.ids);
				return els;
			}
		}
	},
	plugins: [ typography ]
};

// tailwind.config.js
module.exports = {
  purge: {
    enabled: process.env.HUGO_ENVIRONMENT === 'production',
    content: ['./layouts/**/*.html', './themes/**/*.html'],
  },
...

Is there any particular reason not to use the Tailwind v2 built in purge?

Styles get applied in localhost:1313but don't when I open the final index.html file inside public. The link tag in this file is as follows:

    <link href="/css/styles.min.52e3ba9573dbb62854822e4cadded642295dfdff0ce8c8908db7921c22e87145.css" rel="stylesheet" />

The path and file name are accurate. I also tried removing the numbers from the filename (I'm guessing these are added to prevent caching?) & updating the href but still no styles are being applied.

I was wondering if this might be also causing my 2nd problem. Since tailwind v3.1, you can use [&>*] as a sort of selector to apply tailwind classes to an element's children. Here's a working example that uses v3.3.3: https://play.tailwindcss.com/rq8YVDB3LG

This doesn't work when used in the starter template though. I ran npm list tailwindcss to check the installed version & got this:

[email protected] /home/sujal/programming/client-work/hugo-kamana-treks
├─┬ @tailwindcss/[email protected]
│ └── [email protected] deduped
└── [email protected]

Does the "tailwindcss": "^2.2.7" in package.hugo.json affect this? [&>*] works fine when I test it in a non-hugo project using the tailwind v3.3.3 binary. I tried updating tailwind inside the template to 3.3.3 as well but to no avail

Edit: Forgot to say that both the index.html & styles.css files in public don't have the [&>*] class

How can I do if i make custom theme within themes folder.

themes/name.

Hi, this has been issue with tailwind itself...
but there is a way to speed up buildtime, at the cost of not being able to use @apply

but i think the trade off is pretty good, since you dont usually use it
me personally...

https://nystudio107.com/blog/speeding-up-tailwind-css-builds

Ive notice the buildtime on this new starter app is 3.6 secs which is slow compare to other hugo site
which is below 500 ms without all the added stuffs...

Quck question, is esbuild the compiler being used to process css?
thats the fastest compiler yet tailwind is so slow...
Been trying to cut down the cold start boot time in my main project from 11secs now at 6 secs...
significant increase...
i think all starter template should be at least around 200ms from scratch...

If i try the command "hugo" i got some errors. Is it possible to build this into the "public" folder.

i had an old version 0.68.1 installed. i'm sorry.
thanks for your awesome work on hugo.

Hi
I'm observing that due to some reasons things messed up. I don't know if it's in only my case or you guys configured it by choice.
Check the screenshot here:

See how even in mobile preview class with in media query (min-width: 768px) is overriding the default class. I'm confused!

I was excited to use this starter template by Bep and other but currently having bad time. BTW, I'm not new to tailwindcss.

Just curious what the difference between this Starter and hugo-theme-tailwindcss-starter?

I noticed this one is newer and has the config files in a different location. Does this repository use new features in Hugo that would make this a better Starter?

Thanks in advance for any input you're willing to share.