[cadamsdotcom]

Breaking things into components eliminates the repetition AND eliminates separate CSS.

Using Tailwind without components is the worst of all the worlds. You could do it though, just start off your journey a CSS file like this:

    ```
    .btn-confirm {
      @apply min-w-[200px] block bg-green; // plus many more, probably
    }
    ```

But that sucks because now you have a separate CSS file outside your component. Where will you put it in your codebase? Will it grow other random styles over time? You’re asking for a mess.

Better to do:

    ```
    export default const ConfirmButton = ({ children }) => <div className=“min-w-[200px] bg-green”>{children}</div>
    ```

Now use a `<ConfirmButton />` everywhere and avoid all that repetition.