The class does not exist

[fgdaniel]

[Error - 11:23:57 AM] Tailwind CSS: <css input>:4:17: The `md:text-5xl` class does not exist. If you're sure that `md:text-5xl` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
CssSyntaxError: <css input>:4:17: The `md:text-5xl` class does not exist. If you're sure that `md:text-5xl` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

File: fontSize.js

const fontSize = {
	xs: ['0.75rem', { lineHeight: '1rem' }],
	sm: ['0.875rem', { lineHeight: '1.25rem' }],
	base: ['1rem', { lineHeight: '1.3125' }],
	lg: ['1.25rem', { lineHeight: '1.25' }], // font-size 20px
	xl: ['1.875rem', { lineHeight: '1.33333333' }], // font-size 30px
	'2xl': ['2.5rem', { lineHeight: '1.25' }], // font-size 40px
	'3xl': ['3.125rem', { lineHeight: '1.4' }], // font-size 50px, line-height 70px
	'4xl': ['3.75rem', { lineHeight: '1.16666667' }], // font-size 60px, line-height 70px
	'5xl': ['5rem', { lineHeight: '1.0375' }] // font-size 80px, line-height 83px
}

module.exports = fontSize;

File: tailwind.config.js

const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')
const defaultConfig = require('tailwindcss/defaultConfig')

const config = {
	screens: require('./resources/tailwindcss/config/screens'),
	colors: require('./resources/tailwindcss/config/colors'),
	fontFamily: require('./resources/tailwindcss/config/fontFamily'),
	fontSize: require('./resources/tailwindcss/config/fontSize'),
	spacing: require('./resources/tailwindcss/config/spacing'),
	boxShadow: require('./resources/tailwindcss/config/boxShadow'),
}

module.exports = {
	mode: 'jit',
	purge: {
		content: [
			'./views/**/*.twig',
			'./views/*.twig'
		],
		options: {
			keyframes: true
		}
	},
	darkMode: false, // or 'media' or 'class'
	theme: {
		screens: config.screens,
		colors: config.colors,
		fontFamily: config.fontFamily,
		fontSize: config.fontSize,
		extend: {
			lineHeight: {
				body: '1.3125',
			},
			spacing: config.spacing,
			maxWidth: config.spacing,
			minWidth: config.spacing,
			width: config.spacing,
			maxHeight: config.spacing,
			minHeight: config.spacing,
			height: config.spacing,
			boxShadow: config.boxShadow,
			backgroundPosition: {
				'center-center': '50% 50%',
			},
			animation: {
				'bounce-slow': 'bounce-slow 3s infinite',
			},
			keyframes: {
				'bounce-slow': {
					'0%, 100%': {
						transform: 'translateY(-2.5%)',
						animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
					},
					'50%': {
						transform: 'translateY(0)',
						animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
					}
				}
			}
		},
	},
	variants: {
		extend: {
			visibility: ['group-hover']
		},
	},
	corePlugins: {
		container: false,
	},
	plugins: [
		require('./resources/tailwindcss/components/container'),
		require('./resources/tailwindcss/components/headings'),
		require('./resources/tailwindcss/components/prose'),
		require('./resources/tailwindcss/components/siteHeader'),
		require('./resources/tailwindcss/components/primaryMenu'),
		require('./resources/tailwindcss/components/socialNav'),
		require('./resources/tailwindcss/components/buttons'),
		require('./resources/tailwindcss/components/forms'),
		require('./resources/tailwindcss/utilities/hightlight'),
		require('./resources/tailwindcss/utilities/text'),
	],
}

File: headings.js - This is where i used class md:text-5xl

const plugin = require('tailwindcss/plugin')

const headings = plugin(function ({ addComponents, theme }) {
	addComponents({
		'.text-h1': {
			"@apply text-4xl md:text-5xl font-bold": {},
		},
		'.text-h2': {
			"@apply text-3xl md:text-4xl font-bold": {},
		},
		'.text-h3': {
			"@apply text-2xl md:text-3xl font-bold": {}
		},
		'.text-h4': {
			"@apply text-xl md:text-2xl font-bold": {}
		},
		'.text-h5': {
			"@apply text-lg md:text-xl font-bold": {}
		},
		'.text-h6': {
			"@apply text-lg font-bold": {}
		},
	})
})

module.exports = headings;

Note: when i use new utilities methods like: pt-[30px], my-[30px] the plugin does not work, autocomplete broken

[bradlc]

Thanks for reporting 👍 Should be fixed in v0.6.3!