TWShift Examples - See Tailwind v3 to v4 Conversion in Action

Basic Theme Customization (Colors & Spacing)

Demonstrates how theme extensions for colors, spacing, and screens are converted to v4 CSS variables within the @theme directive. Note the conversion of `px` to `rem` for breakpoints.

Tailwind v3 Config (tailwind.config.js)

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3498db',
          DEFAULT: '#2980b9',
          dark: '#1f618d',
        },
        accent: '#e67e22',
      },
      spacing: {
        '128': '32rem',
        'container': '100px',
      },
      screens: {
        '3xl': '1920px',
      }
    },
  },
  plugins: [],
}

Tailwind v4 Output (CSS-first)

@import "tailwindcss";

@theme {
  --color-brand-light: #3498db;
  --color-brand: #2980b9;
  --color-brand-dark: #1f618d;
  --color-accent: #e67e22;
  --spacing-128: 32rem;
  --spacing-container: 100px;
  --breakpoint-3xl: 120rem; /* 1920px / 16px */
}

Keyframes, Animations, and a Plugin

Shows migration of custom keyframes and animation utilities to @keyframes and @utility rules. Also demonstrates how a known official plugin is converted to the @plugin directive.

Tailwind v3 Config (tailwind.config.js)

const plugin = require('tailwindcss/plugin')

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        pulseCustom: {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '.5' },
        }
      },
      animation: {
        'fade-in-slow': 'fadeIn 2s ease-out',
        'pulse-my-custom': 'pulseCustom 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.skew-10deg': {
          transform: 'skewY(-10deg)',
        },
      }
      addUtilities(newUtilities)
    })
  ],
}

Tailwind v4 Output (CSS-first)

@import "tailwindcss";

/* TailwindConvert Info: The following @plugin directives require the respective plugins to be installed in your project (e.g., via npm). They might have compatibility or resolution issues in sandboxed environments like Tailwind Play. */
@plugin "@tailwindcss/typography";

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pulseCustom {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

@utility animate-fade-in-slow {
  animation: fadeIn 2s ease-out;
}
@utility animate-pulse-my-custom {
  animation: pulseCustom 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@utility skew-10deg {
  transform: skewY(-10deg);
}

Content Configuration and Dark Mode

Illustrates how `content` paths might translate to `@source` directives if complex, and how `darkMode` is handled (usually implicitly by v4).

Tailwind v3 Config (tailwind.config.js)

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    '../../node_modules/some-ui-lib/dist/**/*.js', // External path
  ],
  darkMode: 'class', // or 'media'
  theme: {
    extend: {
      colors: {
        primaryDark: '#000000',
      }
    },
  },
  plugins: [],
}

Tailwind v4 Output (CSS-first)

@import "tailwindcss";

@theme {
  --color-primaryDark: #000000;
}

@source "../../node_modules/some-ui-lib/dist/**/*.js";
/* TailwindConvert Info: V4's default content detection is generally sufficient. @source directives are primarily for paths outside typical project structure or complex globs. Dark mode variants (dark:) are available by default in v4. */