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

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

5 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

Thanks Pablo! :wink:

Hello @christian.nascimento,

I’ve been trying to get your sample repository to work and am having an issue.

If I download your github repo and do:
npx frontity dev

It works as expected. When I followed the steps on my project it failed.

I noticed that my package-locked.json was different. So on your repository I removed the package-locked.json and re installed it.

The generated package-locked.json is different.

So on your repo - i deleted the node_modules, and package-locked.json. Then npm i, npx frontity dev

WARNING in ./node_modules/browserslist/node.js 5:20-27
    Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
        at CommonJsRequireContextDependency.getWarnings 

Any thoughts?