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.