Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

learnwithgurpreet/reactjs-tailwindcss

Repository files navigation

ReactJS TailwindCSS component library

Installation

npm i reactjs-tailwindcss

How to use

import { Toggle } from "reactjs-tailwindcss"

<Toggle 
 onChange={() => {}}
 isChecked={false}
 ariaLabel="toggle"
 theme="green"
/>

toggle

Styles

If you use purge, postcss-purgecss, postcss or any other tool to delete unused css, you can add the following array into your ignore (i.e. keep classes / whitelist etc.):

["h-8", "w-14", "relative", "inline-block", "opacity-0", "w-0", "h-0", "rounded-3xl", "absolute", "cursor-pointer", "top-0", "left-0", "right-0", "bottom-0", "transition-all", "translate-x-6", "translate-x-0", "pointer-events-none", "h-6", "w-6", "left-1", "bottom-1", "bg-white", "transform", "rounded-full"]

Dynamic classes

[bg-${theme}-900, bg-${theme}-700]

Dependencies

reactjs-tailwindcss to properly work needs the following dependencies:

  • react@16.13.1
  • react-dom@16.13.1
  • prop-types@15.7.2

npm i -E react@16.13.1 react-dom@16.13.1 prop-types@15.7.2

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Licensing

  • Copyright 2021 reactjs-tailwindcss
  • Licensed under MIT

About

ReactJS components using Tailwind CSS style classes

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

AltStyle によって変換されたページ (->オリジナル) /