Install & Setup Tailwind CSS 3 Atomic Design Toolkit in React Example
Tags: react, tailwindcss, webdev, tutorial
Published: 2022-01-11 09:02:29

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 )](https://a17t.miles.land/)_

_React JS_


Read Also: [How to use Tailwind CSS 3 with Headless UI In React](https://larainfo.com/blogs/how-to-use-tailwind-css-3-with-headless-ui-in-react)


###Install Tailwind CSS v3 In React
Create react project
```react
npx create-react-app atomic-tailwind
```
move to project folder & run.
```react
cd atomic-tailwind
npm start
```
Install tailwind v3.
```js
npm install -D tailwindcss postcss autoprefixer
```
Create tailwind config file.

```html
npx tailwindcss init
```

Next, you need to set tailwind config path.

_tailwind.config.js_
```javascript
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_
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
_App.js_
```react
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;
```

![App.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce9zajjj2mwm6j4oqnie.png)

###Install & setup  tailwind atomic design toolkit 
#####Install a17t
run below command to install atomic design
```js
npm install a17t
```
Now you need to set color & setup a17t atomic plugin. you can copy  below tailwind.config.js code.

_tailwind.config.js_
```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_
```react
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;
```
![atomic tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oe6wbr5a4k41yjxx4zin.png)

run project via npm or yarn

```
# npm
npm start

# Yarn
yarn start
```

You can see more [tailwind atomic design components](https://a17t.miles.land/)