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

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