DEV Community

Cover image for Install & Setup Tailwind CSS 3 Atomic Design Toolkit in React Example
Abuzer
Abuzer

Posted on • Originally published at larainfo.com

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
Enter fullscreen mode Exit fullscreen mode

move to project folder & run.

cd atomic-tailwind
npm start
Enter fullscreen mode Exit fullscreen mode

Install tailwind v3.

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Create tailwind config file.

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Next, you need to set tailwind config path.

tailwind.config.js

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

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

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

App.js

Install & setup tailwind atomic design toolkit

Install a17t

run below command to install atomic design

npm install a17t
Enter fullscreen mode Exit fullscreen mode

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")],
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

atomic tailwind

run project via npm or yarn

# npm
npm start

# Yarn
yarn start
Enter fullscreen mode Exit fullscreen mode

You can see more tailwind atomic design components

Top comments (0)