How to define the sortable custom breakpoints and container sizes

[kostiantyn-petlia]

I'm continuing facing issues with Tailwind where could not expect them, so I need a bit more my effort and your help to solve them. Thank you in advance.

The issues is that custom variation of screen sizes are not sorted.

The 3xl variation of screen is added and works well, but the 3xl:class-name is not sorted.

<div class="3xl:px-12 container mx-auto mb-7 grid grid-cols-1 gap-10 px-4 lg:grid-cols-3 2xl:px-10">

The order of classes is important in Tailwind for comfortable work and it blocks me.

Here are my files:

_theme.css:

  /** Breakpoints. */
  --breakpoint-*: initial;
  --breakpoint-sm: 40rem; /* 640px */
  --breakpoint-md: 48rem; /* 768px */
  --breakpoint-lg: 64rem; /* 1024px */
  --breakpoint-xl: 84rem; /* 1344px */
  --breakpoint-2xl: 102.5rem; /* 1640px */
  --breakpoint-3xl: 160rem; /* 2560px <--- a new custom breakpoint */

  /** Breakpoints: The main container sizes. */
  --main-container-sm: 100%;
  --main-container-md: 100%;
  --main-container-lg: 100%;
  --main-container-xl: 81.5rem; /* 1304px */
  --main-container-2xl: 100rem; /* 1600px */
  --main-container-3xl: 120rem; /* 1920px */

_container.css:

@utility container {
  width: 100%;

  @variant sm {
    max-width: theme(--main-container-sm);
  }

  @variant md {
    max-width: theme(--main-container-md);
  }

  @variant lg {
    max-width: theme(--main-container-lg);
  }

  @variant xl {
    max-width: theme(--main-container-xl);
  }

  @variant 2xl {
    max-width: theme(--main-container-2xl);
  }

  @variant 3xl {
    max-width: theme(--main-container-3xl);
  }
}

main.css:

@import 'tailwindcss/theme.css' layer(theme);
@import './theme/_fonts.css' layer(theme);
@import './theme/_theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import './base/_base.css' layer(base);
@import './components/_components.css';
@import 'tailwindcss/utilities.css';
@import './utilities/_utilities.css'; /* Here I import _container.css */
@import './trumps/_trumps.css';

@source '../../../templates';
@source '../../../blocks/**/*.php';
@source '../../../**/*.php';
@source '../../../assets/scripts/**/*.js';

@layer theme, base, components;

Root:
prettier.config.js is configured in the root of a monorepo repository (as well as Stylelint, etc.):

const THEME_PATH = 'apps/wp-content/themes/theme-name';

export default {
  ...
  tailwindStylesheet: `./${THEME_PATH}/assets/styles/common/main.css`,
  plugins: [
    ...
    'prettier-plugin-tailwindcss',
  ],
 ...
}

Inner:
Vite, Tailwindcss is added in the theme's package.json and configured there.

I understand that it can be the 'prettier-plugin-tailwindcss' issue.
I use a monorepo and I saw there was an issue with it and v4. It seems solved or not?
And I set the tailwindStylesheet as it's recommended here.

Where am I wrong? It seems I do something in a wrong way, it should work form the box.

[kostiantyn-petlia]

The same story with using custom px-17.
Tailwind 4 does not have spacer-17, but it works well form the box. The 68px padding was added. But the class is not sorted.

<div class="lg:px-17 container mx-auto px-6">