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?