Twin.macro Alternatives
Similar projects and alternatives to twin.macro
-
-
twind
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
-
-
tailwindcss-classnames
Functional typed classnames for TailwindCSS
-
tailwind-safelist-generator
Tailwind plugin to generate purge-safe.txt files
-
-
-
chakra-ui
⚡️ Simple, Modular & Accessible UI Components for your React Applications
-
Scout APM
Scout APM: A developer's best friend. Try free for 14-days. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
-
twin.examples
Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.
-
-
jest-styled-components
🔧 💅 Jest utilities for Styled Components
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
-
material-ui
MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
-
headlessui
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
-
-
-
-
-
-
Reviews and mentions
-
What's your preferred way to use Tailwind with React?
Do you write "vanilla" TailwindCSS or do you use something like twin.macro?
-
How To Use Tailwind CSS With Styled Components?
Try twin.macro . In fact - this is the best styling option for react i used to date
-
Goodbye CSS Modules, Hello TailwindCSS
Author here, have you looked at twin.macro?
-
Tailwind is overrated
My company uses Twin Macro, which uses babel to compile our tailwind into CSS classes with Emotion or Styled Components depending on the project. The class names look like .css-${uuid()}, whic h takes care of your dom element class names. You can also still give your components separate class names if you like for tagging, too.
-
Tailwind extension suggestion
Good idea about the extension. I think there’s another tool that could also help you with that called twin macro. It combines css-in-js with tailwind. You can choose emotion or styled-components as your css library. This way you can create css components aside where there’s lots of styling and maybe conditional styling. It’s also much more performant than tailwind
- How to Bypass Learning CSS
-
Tailwind CSS VS Styled Components
Both. It's hard to use Tailwind in React without this https://github.com/ben-rogerson/twin.macro.
twin.macro is the best of both worlds.
-
CSS Variables based alternative to Tailwind
There's this: https://github.com/ben-rogerson/twin.macro Tailwind emotion doesn't google very well though you're right on that!
- Having tons of trouble with Gatsby, Tailwind and Emotion
-
Why is tailwind so popular?
Tailwind works very well with React, but this is required https://github.com/ben-rogerson/twin.macro. It makes development much easier.
-
I made a vscode plugin that can write each part of React component in multiple split editors on the same screen
Live Demo is here (CSS in JS use twin.macro, can experience Typings/Hot reloading/Dev tools by Codesandbox).
-
Is there an elegant solution to write tailwind classes vertically in JS (React)?
I'm currently working on a new project, with tailwind, react/next, styled-components. And using https://github.com/ben-rogerson/twin.macro which looks quite good, coupled with the "nested" postcss plugin. Just had to move some of my styles to separate css(postcss) files for more complex nesting
-
Tailwind CSS is (Probably) Overhyped
If you like styled-components/emotion check out https://github.com/ben-rogerson/twin.macro for integrating both with TailwindCSS
You can use tailwind utility classes in your emotion/styled components with tailwind macros (https://github.com/ben-rogerson/twin.macro). By doing so you get a design system for free that you can incorporate basically any workflow without much effort.
Stats
ben-rogerson/twin.macro is an open source project licensed under MIT License which is an OSI approved license.
Popular Comparisons
Are you hiring? Post a new remote job listing for free.