Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tailwind v1.0 compatibility #20

Open
Shaderpixel opened this issue Mar 26, 2019 · 40 comments

Comments

Projects
9 participants
@Shaderpixel
Copy link

commented Mar 26, 2019

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

This comment has been minimized.

Copy link

commented Apr 1, 2019

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 bradlc added this to To do in v1 Apr 1, 2019

@bradlc bradlc added the v1 label Apr 1, 2019

@bradlc bradlc moved this from To do to In progress in v1 Apr 2, 2019

@bradlc

This comment has been minimized.

Copy link
Owner

commented Apr 2, 2019

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

This comment has been minimized.

Copy link

commented Apr 3, 2019

@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 added a commit that referenced this issue Apr 3, 2019

@bradlc

This comment has been minimized.

Copy link
Owner

commented Apr 3, 2019

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

This comment has been minimized.

Copy link
Author

commented Apr 4, 2019

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

@pradel

This comment has been minimized.

Copy link

commented Apr 5, 2019

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

This comment has been minimized.

Copy link
Owner

commented Apr 5, 2019

@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

This comment has been minimized.

Copy link

commented Apr 5, 2019

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

@Shaderpixel

This comment has been minimized.

Copy link
Author

commented Apr 8, 2019

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

This comment has been minimized.

Copy link
Owner

commented Apr 8, 2019

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

This comment has been minimized.

Copy link
Owner

commented Apr 8, 2019

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

@Shaderpixel

This comment has been minimized.

Copy link
Author

commented Apr 8, 2019

Sweet! Thanks for all the examples and ultra fast response. My issue was I was testing with the old configuration inside of gatsby-node.js that uses the Babel plugin but with the new tailwind.config.js and it obviously error out 🤦‍♂️ . But the interpolation now works well and I am looking forward to using the new interpolation methods in the future. Thanks for all your hard work. Should I close this issue now since support for v1.0 is almost done or you can close it with your v1.0 release?

@bradlc

This comment has been minimized.

Copy link
Owner

commented Apr 8, 2019

No problem! Let me know if you run into any other issues, or have any questions/suggestions.

Let's leave this open until it's released properly :)

@ockam

This comment has been minimized.

Copy link

commented Apr 8, 2019

@bradlc I’m a bit confused by your gatsby-tailwind-demo PR, i.e. you are not using babel-plugin-macros in the packages. Is it required or not?

@bradlc

This comment has been minimized.

Copy link
Owner

commented Apr 8, 2019

@ockam

This comment has been minimized.

Copy link

commented Apr 8, 2019

OK. When using the following code, I get the proper html node but css class do not work (I’m using Emotion):

import tw from "tailwind.macro"
const Test = tw.p` bg-pink text-red`

I don’t see any special config in the example. What am I missing?

@bradlc

This comment has been minimized.

Copy link
Owner

commented Apr 8, 2019

Are you using the default Tailwind v1 config (or no config)? If you are there is no bg-pink or text-red. Maybe try bg-pink-500 or text-red-500

@ockam

This comment has been minimized.

Copy link

commented Apr 8, 2019

🤦‍♂️ too used to the old Tailwind syntax. Works fine now! Huge thanks for the quick reply!

@bradlc

This comment has been minimized.

Copy link
Owner

commented Apr 8, 2019

Hah no worries, I do the same thing when testing Tailwind v1 stuff. bg-red was my go-to test class 😅

We should probably throw an error when a class name is unrecognised. Currently unknown class names are just ignored.

@schrapel

This comment has been minimized.

Copy link

commented Apr 13, 2019

My workaround for the above is. I did not want to hardcode the color so grab it from the config.

import tailwindConfig from '../tailwind.config';

const HeadingInner = styled.h1`
  ${tw`text-5xl font-light tracking-wider uppercase mb-6`}
  color: ${props => (props.dark ? tailwindConfig.theme.colors.gray['600'] : tailwindConfig.theme.colors.primary)}; 
`;
@DevanB

This comment has been minimized.

Copy link

commented Apr 27, 2019

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

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

Would it be possible to specify styled-components/macro in the future @bradlc? This would allow us to receive the beautiful babel-plugin-styled-components goodies like displayName?

The current work-around for this is:

const Wrapper = styled.div`
  ${tw`flex flex-col justify-between`}
`;

as opposed to

const Wrapper = tw.div`flex flex-col justify-between`;
@bradlc

This comment has been minimized.

Copy link
Owner

commented Apr 28, 2019

@DevanB I’ve looked into this and there’s actually a bug in babel-plugin-styled-components that prevents it from working with tailwind.macro. The Tailwind macro produces code that looks like this:

import _styled from 'styled-components'

const Wrapper = _styled("div")({
  display: "flex",
  flexDirection: "column",
  justifyContent: "space-between"
});

babel-plugin-styled-components fails to transform code that looks like this, despite that fact that it is a valid way to create a styled component.

I think we can solve this on our end by updating how the macro transforms the code:

import _styled from 'styled-components'

- const Wrapper = _styled("div")({
+ const Wrapper = _styled.div({
  display: "flex",
  flexDirection: "column",
  justifyContent: "space-between"
});
@bradlc

This comment has been minimized.

Copy link
Owner

commented May 5, 2019

@DevanB I’ve just published an update (v1.0.0-alpha.3) that will hopefully fix the issues with the styled-components babel plugin: npm install tailwind.macro@next

I think you might need to have babel-plugin-macros before babel-plugin-styled-components in your babel config. Let me know if that works ok for you.

@DevanB

This comment has been minimized.

Copy link

commented May 5, 2019

@bradlc Updated, tested, and seem to see no differences. However, I am using CRA, so didn't specify babel-plugin-macros before babel-plugin-styled-components, because I'm not overriding the .babelrc, yet.

When I create with const Actionbar = styled.div`${tw`flex`}`;, I get:

const Actionbar = styled_components__WEBPACK_IMPORTED_MODULE_1__["default"].div.withConfig({
  displayName: "App__Actionbar",
  componentId: "sc-1m9o99g-2"
})(["", ""], {
  "display": "flex"
});

But when I create with const Actionbar = tw.div`flex`;, I get:

const Actionbar = styled_components__WEBPACK_IMPORTED_MODULE_1__["default"].div({
  "display": "flex"
}, p => p.tw);

It's quite possible that I need to override the .babelrc.

@bradlc

This comment has been minimized.

Copy link
Owner

commented May 6, 2019

@DevanB Apologies, I misunderstood initally. After looking in to it properly and actually trying it in CRA I think I’ve got it working.

My babel-plugin-macros.config.js:

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

My component:

import tw from 'tailwind.macro'
let Box = tw.div`uppercase`

Transformed code:

let Box = styled_components__WEBPACK_IMPORTED_MODULE_0__["default"].div.withConfig({
  displayName: "App__Box",
  componentId: "sc-1d5tzwi-0"
})({
  "textTransform": "uppercase"
}, p => p.tw);
@DevanB

This comment has been minimized.

Copy link

commented May 6, 2019

@bradlc looks like that will work. Is this on a remote branch somewhere? I don't mind testing it locally before pushing another alpha.

@bradlc

This comment has been minimized.

Copy link
Owner

commented May 6, 2019

@DevanB It’s already released under the next tag 📦

@DevanB

This comment has been minimized.

Copy link

commented May 6, 2019

Interesting, still no luck for me.

image

@bradlc

This comment has been minimized.

Copy link
Owner

commented May 6, 2019

I'm not at my computer right now, but here's a couple of things to check:

  1. Are you definitely on the latest version? I think it was v1.0.0-alpha-5
  2. What order are your tw and styled imports in, and have you tried swapping them round?
@DevanB

This comment has been minimized.

Copy link

commented May 6, 2019

Good check points:

  1. Yep, I'm pinned to alpha.5 for sure.
  2. They were not in that order before (since automatic import order puts styled before tw. But after switching them, it is working!
@bradlc

This comment has been minimized.

Copy link
Owner

commented May 6, 2019

🎉 Sweet! Unfortunately because of how babel/babel-plugin-macros work if you are importing both tailwind.macro and styled-components/macro in the same file you will need tailwind.macro first

@DevanB

This comment has been minimized.

Copy link

commented May 6, 2019

Makes complete sense.

The only reason I’m doing that is because on some components I need to conditionally set based on a prop. I know this is open in another issue so once it is doable via the tailwind macro, it shouldn’t be a problem at all!

@bradlc

This comment has been minimized.

Copy link
Owner

commented May 6, 2019

Where possible I would recommend using babel-plugin-styled-components instead of the macro, which would avoid this issue, but I appreciate that CRA doesn’t support custom babel configs

@DevanB

This comment has been minimized.

Copy link

commented May 6, 2019

@bradlc does this mean you don't plan to support props like you stated here?

@apolzon

This comment has been minimized.

Copy link

commented May 21, 2019

Thanks for getting this working with v1.0.

I'm trying to use this (currently using the alpha.8 release) with cra + @emotion/styled, and the only issue I'm currently running into is the tw literal syntax is not properly outputting the hoisting/sourcemap functionality in dev. (It works fine, just as an inline style)

I read above where the babel-plugin-macros.config.js file needs to be defined with

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

however, since I'm using emotion, I tried changing it to:

module.exports = {
  tailwind: {
    styled: '@emotion/styled/macro'
  }
}

which still didn't work (I tested by only importing tw and not @emotion/styled/macro in my test file, also with @emotion/styled/macro, both before/after tw).

Definitely not a deal-breaker, I'm fine using the "old" styled component syntax (which is outputting the sourcemap correctly) with interpolated calls to tw for now, but I wanted to post this just in case I had guessed at what the proper config should be incorrectly.

@ben-foster

This comment has been minimized.

Copy link

commented May 25, 2019

Thanks for all the work here everyone. Dropping a note here for anyone else who still had the same problem as I did after reading the above responses...

I couldn't figure out how to mix in vanilla CSS in my tailwind styled components with the above solution of writing tailwind styled components this way:

import tw from 'tailwind.macro'

const ExampleComponent = tw.div`
  bg-center
  bg-no-repeat
  bg-cover
  h-48
`

But I can confirm that if you upgrade tailwind.macro to 1.0.0-alpha.8 add the code mentioned above to your babel-plugin-macros.config.js:

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

...then you can still write your tailwind styled components this way:

import styled from 'styled-components'
import tw from 'tailwind.macro'

const ExampleComponent = styled.div`
  background-image: url('https://picsum.photos/400/240');
  ${tw`
      bg-center
      bg-no-repeat
      bg-cover
      h-48
  `}
  ::after {
     content: "pseudoelement example";
  }
`

While I'm here... is there a better way of doing this?

@bradlc

This comment has been minimized.

Copy link
Owner

commented May 26, 2019

[...] the tw literal syntax is not properly outputting the hoisting/sourcemap functionality in dev [...]

@apolzon please could you try tailwind.macro@1.0.0-alpha.9? In my tests the babel output is the same as using styled directly.

@apolzon

This comment has been minimized.

Copy link

commented May 27, 2019

I'm still getting the same output as before. My hunch is that it has to do with the babel-plugin-macros.config.js file.

Here's the contents of my config file (located at my client root, its definitely getting read as my server will bomb if I replace '@emotion/styled/macro' with a typo):

module.exports = {
  tailwind: {
    styled: '@emotion/styled/macro'
  }
}

(also tried without the /macro suffix)

and here's a snippet from my test page:

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

...

const TailwindHeading = styled.h2`
  ${tw`text-indigo-600`};
`

const NewSyntax = tw.h2`
  text-indigo-600
`

...

<TailwindHeading>
  Tailwind + Emotion Test
</TailwindHeading>
<NewSyntax>
  New Syntax Test
</NewSyntax>

And here's what I see in the chrome inspector -- the TailwindHeading styles link to my source code (index.js), while the NewSyntax element is referencing the <style> element directly. (I've also tested with the css object style, and that works as well, but I omitted it from this example to try to reduce noise)

Screen Shot 2019-05-27 at 3 19 41 PM

Screen Shot 2019-05-27 at 3 19 52 PM

And here is the raw babel output for the two different styled syntaxes (notice the TailwindHeading element has the additional sourceMappingURL defined, while the NewSyntax element does not):

  var TailwindHeading = Object(_emotion_styled_base__WEBPACK_IMPORTED_MODULE_3__["default"])("h2", {
    target: "evcvfon0",
    label: "TailwindHeading"
  })(Object.assign(tailwind_macro_utils_umd_js__WEBPACK_IMPORTED_MODULE_4___default.a.resolveStyle(_tailwindConfig, [{
    "prop": "color",
    "config": "textColor"
  }, {
    "prop": "fontSize",
    "config": "fontSize"
  }], "indigo-600")), ";" + ( false ? undefined : "/*# sourceMappingURL=**omitted** */"));

  var NewSyntax = Object(_emotion_styled_base__WEBPACK_IMPORTED_MODULE_3__["default"])("h2", {
    target: "evcvfon1",
    label: "NewSyntax"
  })(Object.assign(tailwind_macro_utils_umd_js__WEBPACK_IMPORTED_MODULE_4___default.a.resolveStyle(_tailwindConfig, [{
    "prop": "color",
    "config": "textColor"
  }, {
    "prop": "fontSize",
    "config": "fontSize"
  }], "indigo-600")));

  return react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_5___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(TailwindHeading, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 54
    },
    __self: this
  }, "Tailwind + Emotion Test"), react__WEBPACK_IMPORTED_MODULE_5___default.a.createElement(NewSyntax, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 57
    },
    __self: this
  }, "New Syntax Test"));

I also did a test where I removed the styled.h2`` (TailwindHeading) element and styled import, with the same results -- the returned fragment has the __source key, but the initial creation of the element does not have the sourceMappingURL comment.

One last thing that has me puzzled is that the other syntaxes sourcemaps are working fine regardless of whether I define the babel-plugin-macros.config.js file. I'm not sure if this is due to some defaults working out of the box, or if there is something incorrect with my config which is the root issue.

@ockam

This comment has been minimized.

Copy link

commented Jun 9, 2019

@bradlc using alpha.10 with Emotion in Gatsby, everything works fine with my components, but when I build my site, Tailwind defautConfig.stub.js gets lumped into the bundle. SInce it contains ES6 spread operator, this make older browsers crash (Edge, Explorer).

I tried building a simple test case with a new vanilla Gatsby and I don’t have this problem, so, it’s probably not an issue with the macro, but If you have a suggestion on what may cause this in my project, I’m out of idea to try...

@schrapel

This comment has been minimized.

Copy link

commented Jun 16, 2019

I am now getting this error tailwind.macro: Cannot read property 'type' of undefined when using any class that uses a color e.g. text-red-500, bg-red-900. Other things work like underscore, p-10, m-10, etc. I'm using the following versions if it matters

    "styled-components": "^4.3.1",
    "babel-plugin-macros": "^2.6.1",
    "tailwind.macro": "^1.0.0-alpha.10",
    "tailwindcss": "^1.0.4"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.