Hi all,
I’m using tailwind with hugo and some classes just don’t seem to generate like active: and before: (not to mention the arbitrary values which just don’t seem to work)
using hugo 0.97.1 (too old maybe with tailwind v3?)
body partial:
<!-- Styling -->
{{/* styles */}}
{{ $options := dict "inlineImports" true }}
{{ $styles := resources.Get "css/styles.css" }}
{{ $styles = $styles | resources.PostCSS $options }}
{{ if hugo.IsProduction }}
{{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
{{ end }}
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
example of code that classes won’t be generated for:
<ul>
<li class="before:content-['✓ '] before:text-primary before:font-bold before:pr-2">Hello</li>
</ul>
anything with active: like active:opacity-50 etc
doesn’t look like values other than opacity-50, opacity-25, 100 are being generated at all either…
tailwind.config.js:
//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
variants: {
transform: ['responsive', 'hover', 'active'],
},
darkMode: false,
purge: {
enabled: process.env.HUGO_ENVIRONMENT === 'production',
content: [
'./hugo_stats.json',
'./layouts/**/*.html',
],
extractors: [
{
extractor: (content) => {
let els = JSON.parse(content).htmlElements;
return els.tags.concat(els.classes, els.ids);
},
extensions: ['json']
},
],
mode: 'all',
},
theme: {
container: {
center: true,
},
colors: {
'primary': '#FF4D00',
'secondary': '#FFC700',
'tertiary': '#FFF500',
'bg': '#000',
'text': '#FFFFFF',
'gray': '#888888',
'border': '#202020',
'black': '#000000',
'white': '#ffffff',
},
fontFamily: {
display: ['Syne', 'sans-serif'],
sans: ['Be Vietnam Pro', 'sans-serif'],
}
},
plugins: [
require('@tailwindcss/typography'),
]
};