Tailwind.config.js and require vs import / ESM

sage
, ,
4

Thanks for getting back to me.

It turns out I was just missing a couple of minor things.

Sometimes you have to use .js extension when importing:

  • This works for the forms plugin
    import forms from '@tailwindcss/forms';
  • But you have to use .js for defaultTheme
    import defaultTheme from 'tailwindcss/defaultTheme.js';

In my custom plugins I have to write them like this:

// .js extension required
import plugin from 'tailwindcss/plugin.js';

// used to be module.exports but now:
export default plugin(function ({ addUtilities }) {
	const utils = {
		'.w-edge': {
			position: 'relative',
			margin: '0 auto',
			width: '100vw',
			left: '50%',
			transform: 'translateX(-50%)'
		}
	}

  addUtilities(utils, ["responsive"])
})
2 Likes