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: [],
}