Difficulties adding plugin with responsive styles

[fvanwijk]

I'm trying to create and use fluidContainer plugin with the following code:

const plugin = require('tailwindcss/plugin');

module.exports = plugin(({ addComponents, theme }) => {
  const fluidContainerStyles = [
    {
      '.fluid-container': {
        marginLeft: 'auto',
        marginRight: 'auto',
        width: theme('fluidContainer.default', '100%'),
      },
    },
    {
      '@media (min-width: 768px)': {
        '.fluid-container': {
          width: theme('fluidContainer.small', '100%'),
        },
      },
    },
    {
      '@media (min-width: 1440px)': {
        '.fluid-container': {
          width: theme('fluidContainer.large', '100%'),
        },
      },
    },
  ];

  addComponents(fluidContainerStyles);
});

When I use this class using tw, the default styles are applied, but for the 768 and 1440 breakpoints I don't see the rules being applied. I compiled them successfully using postcss into a css file, and with className="fluid-container" everything works, although obviously I don't want to use className. This gives me an indication that the plugin is written correctly.

The plugin is loosely based on container, so I tried to compare them while debugging.
I did <div tw="container fluid-container"> and the output is:

As you can see, the responsive styles for container are outputted, but not the responsive styles for fluid-container.

When I log the generated config for both plugins, they look very similar.

[
  {
    '.container': { width: '100%', marginRight: 'auto', marginLeft: 'auto' }
  },
  { '@media (min-width: 375px)': { '.container': [Object] } },
  { '@media (min-width: 768px)': { '.container': [Object] } },
  { '@media (min-width: 1024px)': { '.container': [Object] } },
  { '@media (min-width: 1440px)': { '.container': [Object] } },
  { '@media (min-width: 1920px)': { '.container': [Object] } }
]

[
  {
    '.fluid-container': { marginLeft: 'auto', marginRight: 'auto', width: '87.7%' }
  },
  { '@media (min-width: 768px)': { '.fluid-container': [Object] } },
  { '@media (min-width: 1440px)': { '.fluid-container': [Object] } }
]

Since addComponents is supported by twin.macro, I expect everything to work with twin.macro.
I wonder if you could track down this issue and hopefully provide a fix/solution.
I use [email protected], [email protected] and [email protected].

[ben-rogerson]

Thanks for the excellent report on this issue frank, I'll take a look into it and get back to you.

[ben-rogerson]

Hey Frank, just a quick update - I've located the issue and I'm working on a patch.

[ben-rogerson]

The fix for this is now in v1.5.0 🎉

I've made you a fluid-container demo in CRA →

[fvanwijk]

Confirmed this fix works locally on my project. Thanks a lot! 👍