Tailwind CSS

npx tailwindcss init

npm install -D tailwindcss

npx tailwindcss -i input.css -o output.css

npx tailwindcss -i input.css -o output.css --watch

// tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        colors: {
          'brand-blue': '#1992d4'
        }
      }
    }
  }

// tailwind.config.js
  module.exports = {
    content: [
      './src/**/*.{html,js,jsx,ts,tsx}'
    ]
  }

<div class="flex justify-center items-center h-screen">
    <div>Centered Content</div>
  </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Grid items -->
  </div>

npm install @tailwindcss/typography

<article class="prose">
    <!-- Markdown content -->
  </article>

// tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        colors: {
          primary: {
            100: '#ebf8ff',
            500: '#1992d4',
            900: '#1e3a8a'
          }
        }
      }
    }
  }

// tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        spacing: {
          '128': '32rem',
          '144': '36rem'
        }
      }
    }
  }

// tailwind.config.js
  module.exports = {
    theme: {
      screens: {
        'tablet': '640px',
        'laptop': '1024px',
        'desktop': '1280px',
      }
    }
  }

<!-- Base style (mobile), overridden at larger screens -->
  <div class="text-sm md:text-base lg:text-lg">
    Responsive text
  </div>

<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
    Click me
  </button>

// tailwind.config.js
  module.exports = {
    darkMode: 'class', // or 'media'
    // ...
  }

<button class="btn-primary">Click</button>
  
  <style>
  .btn-primary {
    @apply px-4 py-2 rounded bg-blue-600 text-white font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300;
  }
  </style>

<div class="max-w-sm rounded overflow-hidden shadow-lg">
    <div class="px-6 py-4">
      <div class="font-bold text-xl mb-2">Card Title</div>
      <p class="text-gray-700 text-base">
        Card content
      </p>
    </div>
  </div>

<div class="animate-bounce">Bouncing</div>
  <div class="animate-pulse">Pulsing</div>

// tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
          'spin-slow': 'spin 3s linear infinite',
        }
      }
    }
  }

// tailwind.config.js
  module.exports = {
    mode: 'jit',
    purge: [
      './src/**/*.{html,js,jsx,ts,tsx}'
    ],
    // ...
  }

// tailwind.config.js
  module.exports = {
    purge: {
      content: [
        './src/**/*.html',
        './src/**/*.jsx',
      ],
      options: {
        safelist: ['bg-red-500', 'text-center']
      }
    }
  }

<div class="top-[117px]">
  <div class="bg-[#1da1f2]">
  <div class="grid-cols-[1fr,700px,2fr]">

<div class="!text-red-500">
  <div class="sm:!hidden">

// tailwind.config.js
  const plugin = require('tailwindcss/plugin')
  
  module.exports = {
    plugins: [
      plugin(function({ addUtilities }) {
        addUtilities({
          '.rotate-y-180': {
            transform: 'rotateY(180deg)',
          },
        })
      })
    ]
  }

npm install @tailwindcss/forms

// postcss.config.js
  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

// vue.config.js
  module.exports = {
    css: {
      loaderOptions: {
        postcss: {
          postcssOptions: {
            plugins: [
              require('tailwindcss'),
              require('autoprefixer'),
            ],
          },
        },
      },
    },
  }

// tailwind.config.js
  module.exports = {
    plugins: [
      require('tailwindcss-debug-screens'),
    ]
  }

/* Chrome DevTools */
  /* In Styles panel, click on the class to see source */
  /* Or use Computed tab to see cascade */