Tailwind CSS — Technologie

Czym jest Tailwind CSS?

Tailwind CSS to utility-first CSS framework, który pozwala stylować elementy bezpośrednio w HTML za pomocą klas utility. Zamiast pisać custom CSS, komponujesz design z gotowych klas: flex, gap-4, rounded-xl, bg-purple-500.

Tailwind to standard w ekosystemie React/Next.js. Używany przez Vercel, Shopify, Netflix, NASA. W połączeniu z shadcn/ui daje pełny design system out-of-the-box.

Przykłady kodu

Karta produktu

              Tailwind + React
              function ProductCard({ product }: { product: Product }) {
  return (
    <div className="group relative flex flex-col
      rounded-2xl border border-white/10
      bg-white/5 backdrop-blur-sm p-6
      hover:border-purple-500/30
      hover:shadow-[0_8px_30px_rgba(168,85,247,.15)]
      transition-all duration-300">

      <img
        src={product.image}
        className="w-full h-48 object-cover rounded-xl
          group-hover:scale-[1.02] transition-transform"
      />

      <div className="mt-4 space-y-2">
        <h3 className="text-lg font-bold text-white">
          {product.name}
        </h3>
        <p className="text-sm text-gray-400 line-clamp-2">
          {product.description}
        </p>
        <span className="text-2xl font-black
          bg-gradient-to-r from-purple-400 to-indigo-400
          bg-clip-text text-transparent">
          {product.price} PLN
        </span>
      </div>
    </div>
  );
}
            

Responsive + Dark mode

              Tailwind Responsive
              <!-- Mobile first → tablet → desktop -->
<div className="
  grid grid-cols-1
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
  gap-4 sm:gap-6 lg:gap-8
">

<!-- Dark mode -->
<div className="
  bg-white dark:bg-gray-900
  text-gray-900 dark:text-white
  border-gray-200 dark:border-gray-800
">

<!-- Animacje -->
<button className="
  bg-purple-600 hover:bg-purple-700
  active:scale-95
  transition-all duration-200
  shadow-lg hover:shadow-purple-500/25
">
            

tailwind.config.ts

              Tailwind Config
              import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#faf5ff',
          500: '#a855f7',
          900: '#581c87',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      borderRadius: {
        '2xl': '16px',
        '3xl': '24px',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('tailwindcss-animate'),
  ],
} satisfies Config;
            

Ocena kompetencji

Szybkość developmentu

98%

Spójność designu

95%

Responsive

100%

Bundle size

92%

Customizacja

90%

Łatwość nauki

80%

Co potrafi Tailwind

Utility classes

Flex, grid, spacing, colors, typography, shadows, borders — wszystko jako klasy.

Responsive design

Mobile-first breakpoints: sm, md, lg, xl, 2xl. Bez media queries w CSS.

Dark mode

dark: prefix. System preference lub manual toggle. Zero dodatkowego CSS.

shadcn/ui

Copy-paste components built on Tailwind + Radix. Button, Dialog, Table, Form.

Animations

tailwindcss-animate, Framer Motion. Hover, focus, group-hover transitions.

JIT compiler

Just-in-Time compilation. Arbitrary values, zero unused CSS. Tiny bundle.

Kiedy wybrać Tailwind?

Idealny gdy: budujesz z React/Next.js, chcesz szybki development, potrzebujesz spójnego designu, budujesz z shadcn/ui, pracujesz w zespole.

Nie najlepszy gdy: wolisz tradycyjny CSS/SCSS, budujesz bardzo custom animacje (lepiej CSS + Framer Motion), nie lubisz długich className.

TailwindCSS