Add custom max width, add custom class to apply custom max width not working

[seandelaney]

First of all, Im not entirely sure if I set this up correctly.

In my tailwind.config.js:

module.exports = {
    ...
    theme: {
        extend: {
            width: {
                'full-hd': '1344px',
            },
        },
    },
    ...
};

Then I have in a SCSS file:

@layer components {
  .max-full-hd-p {
    @apply max-full-hd:px-12;
  }

  .max-full-hd-m {
    @apply max-full-hd:mx-12;
  }
}

SCSS compiles fine but doesn't take effect when I hit max width. px-12 isn't applied.

Is what Im trying to do possible?

[wongjn]

It seems like you're after screens, not width:

 module.exports = {
   …
   theme: {
     extend: {
-      width: {
+      screens: {
         'full-hd': '1344px',
       },
     },
   },
   …
};