How to use Tailwind directives such as @screen inside styled component

[moxdev]

Is it not possible to use the Tailwind @screen directive within a tw styled component? I have nesting turned on in my postcss.config file but doesnt seem to work.

const MainContent = styled.div`
  ${tw`mb-4`}

  @screen sm {
    @apply bg-red;
  }
`

PostCSS config postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.config.js'),
    require('postcss-import')({
      plugins: [require('stylelint-config-recommended')],
    }),
    require('postcss-preset-env')({
      autoprefixer: { grid: false },
      features: {
        'nesting-rules': true,
      },
      browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
    }),
  ],
}

[ben-rogerson]

You're working within styled-components so the directives can't be used.

Instead, we make variables and pass them onto components:

const stylesRed  = tw`bg-red text-white`

const MainContent = styled.div`
  ${tw`mb-4`}
  ${stylesRed}
`

[ben-rogerson]

Oh and that postcss.config.js isn't going to work with twin classes, check the setup guides for more info.