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
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?
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!
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.
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.
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.
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?