Art of Tailwind CSS

TailwindCSS is a utility-first CSS framework. It is a set of CSS classes that you can use to style your HTML elements. It is not a UI library like Bootstrap or Material UI. It is a CSS framework that you can use to build your own UI library. Assuming you have a basic understanding of HTML and CSS, you can use TailwindCSS to build your own UI library.

One of the hardest thing to do is Animation In tailwind.config.js, you can add your own animation. Keyframes are the animation that you want to do. Animation is the name of the animation that you want to do.

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    extend: {
      keyframes: {
        shake: {
          '0%, 100%': { transform: 'translate3d(0, 0, 0)' },
          '10%, 30%, 50%, 70%, 90%': { transform: 'translate3d(-10px, 0, 0)' },
          '20%, 40%, 60%, 80%': { transform: 'translate3d(10px, 0, 0)' }
        }
      },
      animation: {
        shake: 'shake 1s ease-in-out'
      }
    }
  },
  plugins: []
}

After that, you can use the animation in your HTML element.

<div className="animate-shake">Shake me!</div>

You can use arbitrary values in TailwindCSS. For example, if you want to set the width of an element to 100px, you can do it like this:

<div className="w-[100px]">My Element</div>

You can also use arbitrary values in the @apply directive. For example, if you want to set the width of an element to 100px, you can do it like this:

@layer base {
  .my-element {
    @apply w-[100px];
  }
}

Then you can use the my-element class like this:

<div className="my-element">My Element</div>

You can't use it for animations though.

You do not need to make components for default HTML elements to reuse TailwindCSS classes. Things like button, input, p tag, etc. You can override them by using the @apply directive at @layer base.

@layer base on globals.css is the base layer. It is the default style of the HTML elements. You can override the default style by using the @layer base directive. For example, if you want to override the default style of the h1 element, you can do it like this on your globals.css file:

@layer base {
  h1 {
    @apply text-4xl font-bold text-gray-900;
  }
}

Then you can use the h1 element like this:

<h1>My Title</h1>

Even for the button element, you can override the default style like this:

@layer base {
  button {
    @apply px-4 py-2 text-white bg-blue-500 rounded-md;
  }
}

Then you can use the button element like this:

<button>My Button</button>

Then poof!, all your buttons will have the same style.

You can make components for custom elements. For example, if you want to make a card, you can do it like this:

async function handleClick() {
  const { data, error } = await someAPICalls
  redirect('/some-page')
}
;<Card
  customTailwindClasses="bg-red-50 border-red-200 rounded-lg"
  customFunction={() => handleClick}
>
  <span>My Card</span>
  <span>Card detail</span>
</Card>

Then you can make a component for it like this:

// Card.tsx
import React from 'react'
 
export default function Card({
  children,
  customTailwindClasses,
  customFunction
}: {
  children: React.ReactNode
  customTailwindClasses?: string
  customFunction?: () => void
}) {
  return (
    <div className={`${customTailwindClasses}`} onClick={customFunction}>
      {children}
    </div>
  )
}