Converting Tailwind 3 half-container plugin

[stuartcusackie]

I used to use the code below for a handy .container-half class. I tried adding it to Tailwind 4 but there are two problems:

• The important modifier doesn't work e.g. lg:!container-half
  • It's not like it is being overridden, the class is just not recognised at all
• The widths are all wrong

Any ideas of where I am going wrong?

import plugin from 'tailwindcss/plugin'

export default {
    plugins: [
            // Add container-half classes
            addBase(Object.entries(theme('screens'))
                .filter(value => typeof value[1] == 'string')
                .sort((a, b) => {
                    return (a[1].replace(/\D/g, "") - b[1].replace(/\D/g, ""))
                })
                .map((value) => {
                    return {
                        [`@media (min-width: ${value[1]})`]: {
                            '.container-half': {
                                'max-width': `${parseInt(value[1], 10) / 2}rem`,
                            },
                        },
                    }
                })
            )
        }),
    ],
}

Update:
It seems easier to do this using the @Utility function, although I am still curious as to how I would do this using the original plugin approach.

@utility container-half {
  @variant xs { max-width: calc(var(--breakpoint-xs) / 2); }
  @variant sm { max-width: calc(var(--breakpoint-sm) / 2); }
  @variant md { max-width: calc(var(--breakpoint-md) / 2); }
  @variant lg { max-width: calc(var(--breakpoint-lg) / 2); }
  @variant xl { max-width: calc(var(--breakpoint-xl) / 2); }
  @variant 2xl { max-width: calc(var(--breakpoint-2xl) / 2); }
}

Thanks.

[rozsazoltan]

Just use @plugin directive:

./css/container-half-plugin.js

import plugin from 'tailwindcss/plugin';

const containerHalfPlugin = plugin(function({ addBase, theme }) {
  const screens = theme('screens');

  const entries = Object.entries(screens)
    .filter(([_, val]) => typeof val === 'string')
    .sort((a, b) => {
      return parseInt(a[1].replace(/\D/g, ''), 10) - parseInt(b[1].replace(/\D/g, ''), 10);
    })
    .map(([_, val]) => ({
      [`@media (min-width: ${val})`]: {
        '.container-half': {
          'max-width': `${parseInt(val, 10) / 2}rem`,
        },
      },
    }));

  addBase(entries);
});

export default containerHalfPlugin;

./css/globals.css

@import "tailwindcss";
@plugin "./container-half-plugin.js";

Note: Make sure the relative file path is correct.

I haven't tested it. Please let me know if I messed anything up :'D I just made the entries declaration passed to addBase a bit more readable, but other than that, I basically turned the original into a standard separated plugin. (You used parseInt inconsistently - once you used it, once you didn't; also, instead of value[1], a more refined [_, val] declaration is used when you don't need the 0th value. Variable names starting with _ or named _ are treated by JS as unused, so declaring them doesn't cause any issues.)

[stuartcusackie]

I tried it out but there were two problems:

• using lg:!container-half was not recoginised (lg:container-half does) - There's something wrong with using important on these custom plugins in TW4.
• The container sizes were not quite right, but I'm sure I could fix that.

Thanks for the effort though!

[rozsazoltan]

From v4 for important modifier should use as suffix: lg:container-half!

[stuartcusackie]

I tried that but it still doesn't register. By the way lg:!container-half does work when using the @utility container-half approach.