Tailwind CSS

Tailwind CSS

In Tailwind CSS v2 there is a feature called JIT Compiler that speeds up the compilation process.

Here is a basic structure of a page that I usually use with Next.js and Tailwind CSS

import * as React from 'react'
import Seo from '@/components/Seo'
export default function PageName() {
  return (
      <Seo templateTitle="Page Name" />
        <section className="">
          <div className="layout"></div>

Layout Class

This is not Tailwind CSS specific, I also use this for projects with Vanilla CSS.

.layout {
  /* 1100px */
  max-width: 68.75rem;
  @apply w-11/12 mx-auto;
/* or without Tailwind CSS */
.layout {
  max-width: 68.75rem;
  margin: 0 auto;
  width: 90%;

Here is a preview of what it does: Layout

Utilize Framework & Library

Tailwind CSS class names can get ugly, especially when we have a lot of repeated classes. So, it is useful to use frameworks such as React to make it into components.

I also use a library called clsx (opens in a new tab) to make it easier to use build variants on components, also grouping class names into functionality.

For example:

import clsx from 'clsx'
export default function Button({
  className = '',
  variants = 'primary',
}) {
  return (
        'py-2 px-4 rounded font-bold hover:text-primary-400 animated-underline',
        'border border-gray-600',
        'focus:outline-none focus-visible:text-primary-400',
          'bg-dark text-white': variants === 'primary',
          'bg-white text-dark hover:bg-gray-200 hover:text-dark focus-visible:text-dark':
            variants === 'secondary',

Additional Resource

If you want to learn more about my best practice using Tailwind CSS, I recommend reading this article (opens in a new tab).

Last updated on November 14, 2023