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

Read Also: How to use Tailwind CSS 3 with Headless UI In React

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;

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;

run project via npm or yarn

# npm
npm start

# Yarn
yarn start

You can see more tailwind atomic design components