Tailwind Atoms

Tailwind CSS plugin to get atomic components ready to use

with HTML & React: button, input, checkbox switch...

Website · Components · Twitter

^{Created by Christophe Ribeiro 🪄}

Setup

Install the plugin:

yarn add tailwindatoms --dev
yarn add @tailwindatoms/react # if you use React

or

npm install tailwindatoms --save-dev
npm install @tailwindatoms/react # if you use React

Add the plugin to your Tailwind config:

// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("tailwindatoms")],
}

Getting started

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 MyPage

Components

Checkout the components list on the official website.