Install & Setup Tailwind CSS 3 Atomic Design Toolkit in React Example

In this section we will install tailwind atomic design toolkit for react. Atomic design toolkit provide beautiful interfaces without reinventing the wheel. a17t is a Tailwind CSS plugin that provides atomic components like field, button, and card in a neutral design language that scales with your project.

Tool Use

Tailwind CSS 3.x

Atomic design toolkit ( a17t )

React JS

Install Tailwind CSS v3 In React

Create react project

npx create-react-app atomic-tailwind 

move to project folder & run.

cd atomic-tailwind
npm start

Install tailwind v3.

npm install -D tailwindcss postcss autoprefixer

Create tailwind config file.

npx tailwindcss init

Next, you need to set tailwind config path.

tailwind.config.js

module.exports = {
 content: [
  "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
  extend: {},
 },
 plugins: [],
}

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

App.js

function App() {
  return (
    <div className="container mx-auto mt-4">
      <h1 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-600 ">
        Tailwind V3 Atomic design toolkit in React
      </h1>
    </div>
  );
}


export default App;

tailwind v3 react

Install & setup tailwind atomic design toolkit

Install a17t

run below command to install atomic design.

npm install a17t

Now you need to set color & setup a17t atomic plugin. you can copy below tailwind.config.js code.

tailwind.config.js

let colors = require("tailwindcss/colors")
module.exports = {
  content: [
    "./src/**/*.{js,jsx,,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        neutral: colors.slate,
        positive: colors.green,
        urge: colors.violet,
        warning: colors.yellow,
        info: colors.blue,
        critical: colors.red,
    }
    },
  },
  plugins: [require("a17t")],
}

All Done now test atomic design a17t code.

App.js

function App() {
  return (
    <div className="container mx-auto mt-4">
      <h1 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-600 ">
        Tailwind V3  Atomic design toolkit  in React
      </h1>
      <div className="max-w-sm mt-4">
        <form class="card p-0">
          <section class="p-4 flex flex-col gap-4">
            <div>
              <label class="label" for="toolkit">Current job</label>
              <div class="select ~neutral @low block my-1 max-w-xs">
                <select>
                  <option>Teacher</option>
                  <option>Engineer</option>
                  <option>Firefighter</option>
                  <option>Other</option>
                </select>
              </div>
              <p class="support">If you are a student, select 'other.'</p>
            </div>
            <div>
              <label class="label" for="toolkit">Favorite toolkit</label>
              <input id="toolkit" type="text" class="input ~critical !normal my-1 max-w-xs block" placeholder="At least 8 characters..."
                value="Not a17t" />
              <p class="support ~critical">The correct answer is a17t!</p>
            </div>
          </section>
          <section class="section ~neutral flex gap-2 p-4">
            <span class="button ~info @high">Submit</span>
            <span class="button ~neutral @low">Save draft</span>
          </section>
        </form>
      </div>
      <div className="mt-8">
        <h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-green-300 via-blue-500 to-purple-600">Tailwind Atomic design  Button</h3>
        <div className="mt-4 space-x-2">
          <span class="button ~neutral @low mb-1">Button</span>
          <span class="button ~positive @low mb-1">Button</span>
          <span class="button ~warning @low mb-1">Button</span>
          <span class="button ~critical @low mb-1">Button</span>
          <span class="button ~info @low mb-1">Button</span>
          <span class="button ~urge @low mb-1">Button</span>
        </div>
      </div>
    </div>
  );
}

export default App;

tailwind react atomic design

run project via npm or yarn

# npm
npm start

# Yarn
yarn start

You can see more tailwind atomic design components

Read Also

How to use Tailwind CSS 3 with Headless UI In React

Toggle Switch in React JS with Tailwind CSS Example

Create Reusable Button Component with React & Tailwind CSS

React Tailwind CSS Search Bar Example

React Tailwind CSS Sidebar Example

React JS Login Form with Tailwind CSS Example

React Responsive Navbar Menu With Tailwind CSS Example

How to install Tailwind CSS in React

React Tailwind CSS Dialog (Modal) Example

React Tailwind Registration Form Example

React Tailwind CSS Table Example

React Tailwind CSS Responsive Gallery Example