Plugins not working with styled components

[mlaroy]

It seems that the Tailwind plugins aren't working using styled components. For example, the container plugin should give the max-width properties at different breakpoints, with optionally centering by default in the config.

See Tailwind's docs for plugin details.

However, even with this setting enabled, no styles are applied.

const Container = styled.div`
  ${tw`p-8 container`};
`

[muhajirdev]

Hey @mlaroy, thank you for submitting issue. I'll try to reproduce the issue in a few hours.

[muhajirdev]

Hi there,
I tried to reproduce this repo https://github.com/muhajirframe/gatsby-tailwind-emotion-starter

Here's what I do:

gatsby new my-new-website https://github.com/muhajirframe/gatsby-tailwind-emotion-starter
cd my-new-website
npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

And then in gatsby-config.js I change gatsby-plugin-emotion with gatsby-plugin-styled-components

And then I change every

import styled from 'react-emotion';

to

import styled from 'styled-components';

In this case it's in /src/components/header.js and /src/components/layout.js

Try to change bg-grey-lightest to bg-red to see if it works for you

[muhajirdev]

Actually,
I just made a sample repo for that lol. Here you go https://github.com/muhajirframe/gatsby-tailwind-styled-components-starter

[mlaroy]

Hi,
thanks for putting together the demo repo!

I see that perhaps my issue wasn't clear - the overall plugin works great with styled components. It's the Tailwind Plugin part (as detailed in the doc that I linked to) that doesn't work. So if you want to use a class generated by one of Tailwind's plugns, e.g:

tailwind.config.js
...

plugins: [
    require('tailwindcss/plugins/container')({
      center: true,
    }),
  ]

which is what enables using the .container class on top of all other other out-of-the-box Tailwind stuff. However, this is the part that isn't working for me in this snippet, specifically the container class:

import styled from 'styled-components'

const Container = styled.div`
  ${tw`container`};
`

Other generic tailwind classes work just fine this way.

I hope that is a little more clear.

Thanks for your hard work!

[muhajirdev]

Ah, I see what you mean.

This plugin uses babel-plugin-tailwind-components which currently doesn't support tailwind plugin. You can see the discussion here bradlc/babel-plugin-tailwind-components#4