Tailwindcss with babel-macro-plugin and CSS-in-JS

Hi!

I’m trying to use something like this:

npm install --save tailwindcss babel-plugin-macros [email protected]

My .babelrc:

    {
       "plugins": ["macros"]
    }

I wanna use with frontity styled:

You can now use Tailwind classes with your preferred CSS-in-JS library by importing tailwind.macro :

import {styled} from 'frontity'
import tw from 'tailwind.macro'

const Button = styled('button')` ${tw`font-mono text-sm text-red hover:text-blue`}; `

It’s possible to do somethink like that?

I’ve tried but I’m getting the following error:

MacroError: The macro you imported from “undefined” is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don’t have the babel plugin “babel-plugin-macros” configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

References:
https://github.com/bradlc/babel-plugin-tailwind-components
https://nystudio107.com/blog/using-tailwind-css-with-gatsby-react-emotion-styled-components

1 Like

Hi @christian.nascimento! :wave:

I don’t have experience with babel plugins, so it’s not immediately clear to me what the issue could be. Could you provide a small reproduction repo?

I just wanna use tailwindcss with frontity styled. It’s supposed to work with any CSS-in-JS.

They recommend two approaches:

1 - CSS-in-JS:
2 - Postcss

I have successful with Postcss but none with CSS-in-JS.

Take a look if possible in the following links:


https://dev.to/lpbayliss/how-and-why-i-use-emotion-with-tailwind-4elj

Sorry, I’ve realized that we do not support custom .babelrc files as far as I know. @luisherranz Could you confirm that for me?

We don’t, but custom babel support is planed at both project and package level via the upcoming frontity.config.js file.

But maybe before that, we can add babel-plugin-macros to the core babel configuration. I’m going to study if it makes sense, thanks for the suggestion @christian.nascimento!

1 Like

I think it makes total sense to add babel-plugin-macros to our core babel packages. I’ll add a feature request for that.

1 Like

Thanks @luisherranz! :wink:

There you go: Include babel-macros-plugin

By the way, this is extremely simple to do but we have a ton of things with higher priority in the roadmap. If you want to collaborate and submit a pull request yourself, I will gladly instruct you how and merge the code.

To give you an idea, this is were our babel plugins live: https://github.com/frontity/frontity/blob/dev/packages/core/src/config/babel/index.ts#L60
And this is the guide for code collaboration:
https://docs.frontity.org/contributing/code-contributions

Oh, and pay attention to these two warnings :slight_smile:

WARNING: After adding/removing dependencies to a package, go back to the root and do npm install again.

If you are doing modifications to the packages that run before webpack, like file-settings , babel-plugin-frontity or the scripts of core , you need to run npm run build in that package folder after each change.

2 Likes

I’ve just merged a pull request from wisammechano that includes the babel-macros-plugin in Frontity :clap::clap:

It will be released with the next version of Frontity.

5 Likes

OMG! I was planning to create a pull request this week. This is awesome! :smiley: Thanks @luisherranz!

1 Like

The babel-macros-plugin was included in the last release.

@christian.nascimento could you please let us know if you are able to use it with Tailwind?

1 Like

Hi guys, thank you very much for adding babel-macros-plugin!
I am also trying to use it with Tailwindcss on twentytwenty-theme, unfortunately without success. @christian.nascimento, if possible, could you please share how you brought this to work.

Many thanks.
All the best,
Dejan

Hey @dejangeorgiev, could you please provide more details of what is exactly what you are doing and what problems are you having? Thanks!

Hi @luisherranz, sure, i will share here with you.

  1. I followed the instruction from here: https://codesandbox.io/s/nrwxzln4m0?file=/src/index.js
  2. First i installed the babel-plugin-macros
  3. Created the .babelrc
  4. Created tailwind.js
  5. Tested in a component (see Screenshot)

Hi @dejangeorgiev! How are you?

I’m not using a babelrc. I’m using babel-plugin-macros instead.

I’ve created a repo for this: https://github.com/cbfn/frontity-with-tailwind

Best Regards,
Christian

4 Likes

Sorry for my delay! Yes I’m using with frontity. I created a repo with this example. I dont know if this is interesting to add in the frontity docs. What do you thing?

Hi @christian.nascimento, i am fine, thank you. Hope you too? :slight_smile:

Thank you very much for creating this repo, just added the config to my script and works perferct! Great job!

Thank you.
Best regards,
Dejan

2 Likes

This is amazing :smiley: Thanks for the feedback!

Best regards,
Christian

1 Like

This is awesome! Thanks @christian.nascimento :slightly_smiling_face:

Thanks for this contribution @christian.nascimento :smiley:

1 Like