tailwindclass
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;
Why you should use it?
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;
Did you find a grammatical mistake in the documentation?
If you came across a grammatical mistake please create a new issue with more details in the description: here.
Contribute & Support
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:
- Fork this repository to your own GitHub account and then clone it to your local device
- Make sure yarn is globally installed (npm install -g yarn)
- Run yarn to download required packages.
- Build and start the application:
yarn build && yarn test
. Which tests the function. - If you contributed something new, run yarn contrib:add to add yourself to the contributors list
- Finally, submit a pull request with your changes!
- You can add more cases to index.test.js make function
tailwindclass
more accurate.