Sort doesn't work for non-prefixed class text-blue-gray-500 if added after prefixed class sm:text-sm

[deadcoder0904]

Describe the bug
Doesn't sort if I put regular className like text-blue-gray-500 in the end after the prefixed one sm:text-sm.

To Reproduce
I have the following className in React:

<div className="block w-full px-3 py-2 mb-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">Hello</div>

If I put it text-blue-gray-500 in the end like:

<div className="block w-full px-3 py-2 mb-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-blue-gray-500">Hello</div>

Then it doesn't sort it. But if I put it before the last prefixed one, which in this case is focus:outline-none, then it sorts perfectly.

Expected behavior
It should sort even if I put the non-prefixed className in the end.

Additional context

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
	purge: ['./src/**/*.{ts,tsx}'],
	darkMode: false, // or 'media' or 'class'
	theme: {
		extend: {
			colors: {
				'blue-gray': colors.blueGray,
			},
		},
	},
	variants: {
		extend: {},
	},
	plugins: [],
}