Tailwind classes are long, easily wrap classes for tailwind
APACHE-2.0 License
Tailwind classes are long, easily wrap classes for tailwind. Generally you type tailwind.
Installation:
Yarn
yarn add tailwindclass
Npm
npm install tailwindclass
Usage:
import tailwindclass from "tailwindclass";
function App() {
return (
<div>
<h1
className={tailwindclass({
default: "text-[red]",
hover: ["text-[blue]"],
_2xl: ["text-[purple]"]
})}
>
Hello world!
</h1>
</div>
);
}
export default App;
This class in tailwind:
function App() {
return (
<div>
<h1 className="text-[red] hover:text-[blue]" >
Hello world!
</h1>
</div>
);
}
export default App;
Can be converted into something like this:
import tailwindclass from "tailwindclass";
function App() {
return (
<div>
<h1
className={tailwindclass({
default: "text-[red]",
hover: ["text-[blue]"],
_2xl: ["text-[purple]"]
})}
>
Hello world!
</h1>
</div>
);
}
export default App;
tailwindclass
is a typed function. This function makes adding classes very easy.
Note
2xl
can be written as _2xl
import tailwindclass from "tailwindclass";
function App() {
return (
<div>
<h1
className={tailwindclass({
default: "text-[red]",
hover: ["text-[blue]"],
_2xl: ["text-[purple]"]
})}
>
Hello world!
</h1>
</div>
);
}
export default App;
If you came across a grammatical mistake please create a new issue with more details in the description: here.
Pull requests are welcome. If you have discovered a bug or have a feature suggestion, feel free to create an issue on GitHub.
If you'd like to make some changes yourself, see the following:
yarn build && yarn test
. Which tests the function.tailwindclass
more accurate.