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

šŸ™‹Get Help
1

Hi!

Iā€™m trying to use something like this:

npm install --save tailwindcss babel-plugin-macros tailwind.macro@next

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
2

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?

3

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

4

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

5

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
6

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
8

Thanks @luisherranz! :wink:

9

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
11

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
12

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

1 Like
13

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
14

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

15

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

16

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)

frontity_tailwind_2020-04-26_16h00_46
frontity_tailwind_2020-04-26_16h00_461920Ɨ1050 288 KB

17

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

5 Likes
18

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?

19

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
20

This is amazing :smiley: Thanks for the feedback!

Best regards,
Christian

1 Like
23

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

24

Thanks for this contribution @christian.nascimento :smiley:

1 Like