This is a mono repo containing packages that make integrating Tailwind with css-in-js libraries easier.
Currently, we have one package ready to be used in Tailwind projects @tailwindcssinjs/macro
. The other packages are for developing Tailwind tools or adding editor tooling support.
@tailwindcssinjs/marco
is a babel macro that transforms Tailwind classes into css object styles. These css object styles can be used with your favorite css-in-js library.
import tw from "@tailwindcssinjs/macro"
const styles = tw`text-red-100 hover:bg-blue-200`
//Transformed into:
const styles = {
color: "#fff5f5",
"&:hover": {
backgroundColor: "#bee3f8",
}
};
This package was created to solve these problems. You may have encountered some when using Tailwind with css-in-js libraries.
- You need to setup postCSS with your bundler
- You have to use PurgeCSS to get minimal css file
- No error when you misspell a class
- Inline classes can get very long and hard to read
- You have to specify the variants for utility classes in tailwind.config.js
- Solves all of the above problems
- Compatible with Tailwind version 1.2.0
- All utility and component classes
- All variant utility classes
- Full support for custom classes and
tailwind.config.js
customization - New syntax to apply variants to multiple utility classes
- Supports Tailwind plugins (e.g. tailwind-ui, custom-forms)
- No runtime impact all transformations happen during build time.
You can use @tailwindcssinjs/macro
with your preferred CSS-in-JS library that supports css objects styles.
Note: You will need to restart dev server when changes are made to ./tailwind.config.js
and maybe clear the babel cache.
- Have node 12 or above installed
- Install and configure your bundler with babel and babel-plugin-macros
# with npm
npm install --save-dev @tailwindcssinjs/macro tailwindcss
# with Yarn
yarn add -D @tailwindcssinjs/macro tailwindcss
import "tailwindcss/dist/base.min.css";
If you use Tailwind plugins that register new base styles you will need to generate a customized base css file.
Generate base css with Tailwind cli
/* tailwind.base.css */
@tailwind base;
# Use the `npx tailwindcss help build` command to learn more about the various CLI options.
npx tailwindcss build tailwind.base.css -o base.css
Tip: add this command to your package.json scripts section
import "base.css";
npx tailwindcss init
Check out the Tailwind documentation for customizing the Tailwind config file.
Codesandbox with Typescript, Nextjs and Emotion
import React from "react";
import { css, cx } from "@emotion/css";
import tw from "@tailwindcssinjs/macro";
//"React native style"
const styles = {
button: css(tw`
relative
w-full
flex justify-center
py-2 px-4
border border-transparent
text-sm leading-5 font-medium
rounded-md
text-white
bg-gray-600
hover:bg-gray-500
focus[outline-none border-gray-700 shadow-outline-gray]
active:bg-gray-700
transition duration-150 ease-in-out
`)
};
const Button = ({ className, children, ...props }) => (
<button {...props} className={cx(styles.button, "group", className)}>
{/* inline style */}
<span className={css(absolute left-0 inset-y-0 flex items-center pl-3)}>
<svg className={css(h-5 w-5 text-gray-500 group-hover:text-gray-400 transition ease-in-out duration-150)} fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clipRule="evenodd"
/>
</svg>
</span>
{children}
</button>
);
export default Button
I am currently working on:
- a typescript plugin for editor tooling support
- a vcode extension
Not started
a Tailwindcssinjs language serverNot started
a codemod / transformer for Tailwind-ui html templates to react and @tailwindcssinjs/marco components
MIT. Copyright (c) 2020 Arthur Petrie.