Tailwind v1.0 compatibility

[Shaderpixel]

Hi @bradlc, great work on creating this babel plugin. I am building my website using Gatsby and following the starter demo for Gatsby + Emotion + Tailwind (https://github.com/jlengstorf/gatsby-tailwind-demo). It works great with Tailwind v0.7.4.

I was poking around Tailwind site and noticed that Adam is planning a release of v1.0 soon and there are some changes in the way the config files are setup (especially in the theme area). I tried to use the beta v3 release with your plugin and run into an issue when I try to call the new color classes e.g. bg-gray-300 I get a TypeError: Cannot read property 'gray-300' of undefined. I am guessing this is related to how the config file structure has changed. I could be wrong but would love your input on this. Thanks.

[davecalnan]

Hi @Shaderpixel, I ran into the same issue and looked into what would be required for Tailwind 1.0 capability. Unfortunately it doesn't seem to be a trivial update.

My exploration into the source code of this package and tailwindcss

Because pre-1.0 installations have the entire config explicitly listed in the tailwind.js file, it's relatively straightforward to pull in that config and figure out all of the generated classes. (It seems a whole other thing to parse all of the CSS-in-JS and replace the classes with the correct styles).

However with new 1.0 configs, there is new work involved in taking the (likely) minimal tailwind.config.js file and merging it with the default Tailwind config.

The default config has several keys that get a theme function which is called within postcss when building the Tailwind classes.

All this is to say that the work involved to get the resultant config has gone from importing your tailwind.js config file to importing the new tailwind.config.js file, merging it with the default config, and then running all of the functions that get the theme passed to it.

I'm going to try and update to support Tailwind 1.0

I love this package and would love to continue using it with Tailwind 1.*. I'm going to fork the package and get it 1.0 compatible and then create a pull request with the updates. @bradlc if you think that would be helpful, I would really appreciate your input! Thanks.

[bradlc]

Hey @Shaderpixel and @davecalnan

v1 support is very nearly done on the next branch. The main thing left to do is to update the static styles. I will try to publish it to npm this week under the next tag.

[DevanB]

@bradlc I, too, am curious about 1.0. Great work updating this! I'm curious to try it out once you release it to the next tag!

[bradlc]

Still got a bit to do but here's an initial version for anyone wanting to try it out 🎉 https://github.com/bradlc/babel-plugin-tailwind-components/releases/tag/v1.0.0-alpha.2

[Shaderpixel]

Awesome @bradlc, thanks for working so quickly on it. I will give it a whirl hopefully this weekend.

[pradel]

I tried and for now it works well!
Thank you so much @bradlc 🙏
I tried to make it work with styled-components but no luck, I couldn't find how to make the custom config work.

[bradlc]

@pradel the config goes in a babel-plugin-macros config file. For styled-components you would want:

module.exports = {
  tailwind: {
    styled: 'styled-components'
  }
}

Is that what you have?

[pradel]

@bradlc my bad, I was trying to set the config in .babelrc 🤦‍♂️ it's working now, thank you!

[Shaderpixel]

Hey @bradlc, I installed the tailwind.macro and using it with Gatsby. Here are my steps, please let me know if I am doing something wrong: I imported the macro into the document that I am working on and instead of using styled from @emotion/styled I will just use the tw tagged templates?

One more question, is the following no longer doable or I am just doing it wrong. Any suggestions how to accomplish something like the following?

const Paragraph = tw.p`
  flex justify-center items-center bg-gray-500
  color: ${props => (props.primary ? 'hotpink' : 'turquoise')};
`;

[bradlc]

Hey @Shaderpixel

Yeah so instead of this (which still works):

import styled from '@emotion/styled'
import tw from 'tailwind.macro'

const Paragraph = styled.p`
  ${tw`flex justify-center items-center bg-gray-500`}
`;

...you can do this:

import tw from 'tailwind.macro'

const Paragraph = tw.p`flex justify-center items-center bg-gray-500`;

Interpolations like in your example are not supported right now. You would have to do something like:

import styled from '@emotion/styled'
import tw from 'tailwind.macro'

const Paragraph = styled.p`
  ${tw`flex justify-center items-center bg-gray-500`}
  color: ${props => (props.primary ? 'hotpink' : 'turquoise')};
`;

In #22 I have an example of what I'd like to support with regards to interpolations. This would allow:

const Paragraph = tw.p`
  flex justify-center items-center bg-gray-500
  ${props => (props.primary ? { color: 'hotpink' } : { color: 'turquoise' })};
`;

Or if you have those colors in your Tailwind config:

const Paragraph = tw.p`
  flex justify-center items-center bg-gray-500
  ${props => (props.primary ? tw`text-hotpink` : tw`text-turquoise`)};
`;

Are you having trouble getting it to work at all right now?

[bradlc]

I have put together a PR for @jlengstorf's Gatsby demo which uses the alpha release: jlengstorf/gatsby-tailwind-demo#8