Tailwind CSS plugin to get atomic components ready to use
with HTML & React:
button, input, checkbox switch...
Created by Christophe Ribeiro 🪄
Install the plugin:
yarn add tailwindatoms --dev
yarn add @tailwindatoms/react # if you use Reactor
npm install tailwindatoms --save-dev
npm install @tailwindatoms/react # if you use ReactAdd the plugin to your Tailwind config:
// tailwind.config.js
module.exports = {
// ...
plugins: [require("tailwindatoms")],
}With HTML
<button class="btn btn-primary">Submit</button>
<input type="text" class="input" />
<input type="checkbox" class="switch">With React
import { Button, Input } from "@tailwindatoms/react"
const MyPage = () => (
<>
<Button color="primary">Submit</Button>
<Input type="text" />
<Input type="switch" />
</>
)
export default MyPageCheckout the components list on the official website.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent