Tailwind active: before: opacity-35 and other classes just doesn't generate

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'),
	]
};

Your Tailwind config is for v2, not v3.

changing package.hugo, package.json and reworking the CSS a little helped

everything seems much slower though for some reason, building takes 3 seconds at least, maybe it’s my dependencies, not sure why

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.