tailwindcss plugin add but null

[productdevbook]

tailwindcss.config.js

/** @type {import('tailwindcss').Config} */
// @tailwindcss/typography
const tailwindTypography = require('@tailwindcss/typography')
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [tailwindTypography],
}

nuxt.config.ts

  tailwindcss: {
    configPath: './tailwind.config.js',
    viewer: false,
  },

[productdevbook]

or config change only nuxt.config in add same problem

[productdevbook]

same -> #565

[BayBreezy]

Having this same issue but only on macOS

[NnicanBuak]

_{Windows 11, Nuxt 3.3.1}

My plugins are also ignored (maybe I still wrote them down wrong, but I don't have any way to debug the config. More precisely, no settings from tailwind.config.js are applied at all, I've been trying to solve this for hours and decided to extend config)

import { plugin } from 'tailwindcss/plugin'
import tailwindTypography from '@tailwindcss/typography'
import tailwindForms from '@tailwindcss/forms'

export default {
	content: ['content/**/*.md'],
	theme: {
		container: {
			center: true,
			padding: {
				DEFAULT: 'calc(8vw + 24px)',
			},
		},
		fontFamily: {
			sans: ['Montserrat', 'sans-serif'],
			serif: ['EB Garamond', 'serif'],
		},
		extend: {
			colors: {
				primary: '#BFD400',
				primary2: '#BB66A5',
				secondary: '#4F501D',
				secondary2: '#56184A',
			},
			backgroundPosition: {
				'left-59%-bottom': 'left 59% bottom',
				'left-62%-bottom': 'left 62% bottom',
			},
			backgroundSize: {
				'250%': '250%',
			},
		},
	},
	plugins: [
		tailwindTypography,
		tailwindForms,
		plugin({ theme, addBase, addComponents, addUtilities, addVariant }) => {
			const hStyle = {
				fontWeight: theme('fontWeight.bold'),
				fontFamily: theme('fontFamily.serif'),
				color: theme('colors.primary'),
			}

			addBase({
				hr: {
					marginTop: theme('margin.1'),
					marginBottom: theme('margin.3'),
					borderRadius: theme('borderRadius.full'),
					borderStyle: 'none',
				},
				p: {
					fontSize: theme('fontSize.base'),
					fontFamily: theme('fontFamily.sans'),
					color: theme('colors.secondary'),
				},
				h1: { ...hStyle, fontSize: theme('fontSize.4xl') },
				h2: { ...hStyle, fontSize: theme('fontSize.3xl') },
				h3: { ...hStyle, fontSize: theme('fontSize.2xl') },
				h4: { ...hStyle, fontSize: theme('fontSize.xl') },
				h5: { ...hStyle, fontSize: theme('fontSize.lg') },
				h6: { ...hStyle, fontSize: theme('fontSize.base') },
			})

			addComponents({
				'.card': {
					backgroundColor: theme('colors.primary'),
					borderRadius: theme('borderRadius.xl'),
					padding: theme('spacing.6'),
				},
			})

			addVariant({
				interact: 'lg:hover|focus-visible',
			})
		}),
	],
}

Although I noticed something for debugging I think this will help.

[ineshbose]

Plugins can't be serialised by the module and hence are just set to empty array!
Tailwindcss v3.3 supports ESM/TS configurations so we are considering not generating a resolved template anymore - do you have thoughts on this?

[ineshbose]

#565 (comment)