Design Converter
Education
Last updated on Dec 23, 2024
Last updated on Nov 2, 2023
Twin.macro is a powerful CSS-in-JS library that allows developers to use Tailwind CSS syntax within their styled-components. It's a Babel plugin that converts Tailwind classes into styled components or css objects, depending on your setup. This means you can use the full power of Tailwind CSS, including its utility classes, variants, and theming capabilities, right inside your JS file.
1import tw from 'twin.macro' 2 3const Button = tw.button` 4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded 5` 6
Twin.macro offers several advantages over traditional CSS or other CSS-in-JS libraries. Firstly, it allows you to write your styles in the same file as your components, reducing context switching. Secondly, it provides full Tailwind plugin support, enabling you to use any Tailwind CSS plugin within your styled components. Lastly, twin.macro is highly optimized, ensuring your styles are as efficient as possible.
1import tw, { styled } from 'twin.macro' 2 3const Container = styled.div` 4 ${tw`flex items-center justify-center h-screen`} 5` 6
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. Styled Components, on the other hand, is a CSS-in-JS library that allows you to write actual CSS in your JavaScript. Twin.macro combines these two, allowing you to use Tailwind's utility classes within your styled components.
1import tw, { css } from 'twin.macro' 2 3const styles = css` 4 ${tw`flex items-center justify-center h-screen`} 5` 6
Setting up twin.macro in a Next.js project is straightforward. First, install twin.macro and its peer dependencies. Then, create a babel-plugin-macros.config.js file in your root folder and add the twin config. Finally, update your tailwind.config.js file to include the preset option.
1// Install twin.macro and its peer dependencies 2npm install twin.macro tailwindcss styled-components framer-motion 3 4// babel-plugin-macros.config.js 5module.exports = { 6 twin: { 7 preset: 'styled-components', 8 styled: { 9 import: 'default', 10 from: 'styled-components/macro', 11 }, 12 autoCssProp: true, 13 }, 14} 15 16// tailwind.config.js 17module.exports = { 18 presets: [require('twin.macro/preset')], 19} 20
The twin.macro configuration allows you to customize how twin.macro works. You can specify the CSS-in-JS library you're using (styled-components or emotion), enable the automatic css prop, and more. You can also import your Tailwind config to use your custom Tailwind styles.
1// babel-plugin-macros.config.js 2module.exports = { 3 twin: { 4 preset: 'styled-components', 5 styled: { 6 import: 'default', 7 from: 'styled-components/macro', 8 }, 9 autoCssProp: true, 10 config: './tailwind.config.js', 11 }, 12} 13
With twin.macro, you can use Tailwind's utility classes within your styled components. This allows you to leverage the power of Tailwind's utility-first approach while still enjoying the benefits of styled components.
1import tw, { styled } from 'twin.macro' 2 3const Button = styled.button` 4 ${tw`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded`} 5` 6
Twin.macro also allows you to use CSS in JS. This means you can write your styles as JavaScript objects, which can be more familiar if you're used to writing JavaScript. You can also use JavaScript variables and functions in your styles, providing much flexibility.
1import tw, { css } from 'twin.macro' 2 3const styles = css({ 4 display: 'flex', 5 alignItems: 'center', 6 justifyContent: 'center', 7 height: '100vh', 8}) 9
One of the powerful features of twin.macro is its support for conditional styling. You can use JavaScript logic to conditionally apply styles, making your styles more dynamic and responsive.
1import tw, { styled } from 'twin.macro' 2 3const Button = styled.button(({ primary }) => [ 4 tw`font-bold py-2 px-4 rounded`, 5 primary && tw`bg-blue-500 hover:bg-blue-700 text-white`, 6]) 7 8<Button primary>Primary Button</Button> 9<Button>Secondary Button</Button> 10
Twin.macro also supports custom theming. You can define your theme in your Tailwind config and use it in your styles. This allows you to maintain a consistent design system across your application.
1// tailwind.config.js 2module.exports = { 3 theme: { 4 extend: { 5 colors: { 6 'custom-blue': '#1DA1F2', 7 }, 8 }, 9 }, 10 presets: [require('twin.macro/preset')], 11} 12 13// In your component 14import tw from 'twin.macro' 15 16const Button = tw.button` 17 bg-custom-blue text-white font-bold py-2 px-4 rounded 18` 19
Twin.macro is not limited to React and Next.js. It can be used with many modern stacks, including Gatsby, Create React App, etc. The setup process is similar, involving installing twin.macro and its peer dependencies, setting up the Babel plugin, and configuring twin.macro.
1// Install twin.macro and its peer dependencies 2npm install twin.macro tailwindcss styled-components framer-motion 3 4// babel-plugin-macros.config.js 5module.exports = { 6 twin: { 7 preset: 'styled-components', 8 styled: { 9 import: 'default', 10 from: 'styled-components/macro', 11 }, 12 autoCssProp: true, 13 }, 14} 15 16// tailwind.config.js 17module.exports = { 18 presets: [require('twin.macro/preset')], 19} 20
While twin.macro is a powerful tool, it's not without its quirks. One common issue is conflicts with other Babel plugins. If you're experiencing issues, make sure twin.macro is the first plugin in your Babel config. Another common issue is forgetting to import tw from 'twin.macro'. Always make sure to import tw at the top of your file.
1// babel.config.js 2module.exports = { 3 plugins: ['babel-plugin-macros', /* other plugins */], 4} 5 6// In your component 7import tw from 'twin.macro' 8 9const Button = tw.button` 10 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded 11` 12
Twin.macro is a powerful tool that combines the best of Tailwind CSS and CSS-in-JS. It's highly optimized, supports full Tailwind plugin support, and allows you to write your styles in the same file as your components. With its growing popularity and active development, the future of twin.macro looks bright. Whether you're a seasoned developer or just starting, twin.macro is a tool worth considering for your next project.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.