Tailwind Setup

CDN-Based Configuration

Instead of using PostCSS or a build system, Tailwind is delivered via CDN. This keeps the setup minimal and simplifies deployment on static hosting platforms. The second script modifies the Tailwind configuration client-side by extending the theme with custom colors, spacing, and animation keyframes.

Theme Colors

The project defines custom theme colors for surface, card, border, and text layers. It also includes accent shades for highlighting and dark mode equivalents for every color group.

Code Highlighting

Code blocks are styled using a dedicated palette defined in the extend.colors.code section of the config. Each language group (JavaScript, TypeScript, Python, HTML) maps to shared styles.

      
      code: {
        key: '#F87171',
        value: '#9CA3AF',
        function: '#60A5FA',
        comment: '#60A5FA',
        html: {
          tag: '#F87171',
          attr: '#60A5FA',
          string: '#9CA3AF'
        }
      }
      
      

These colors are then referenced using utility classes like text-code-key and text-code-comment within the page markup.

Responsive Layout Utilities

Responsive utilities are applied directly to elements through Tailwind's breakpoint system. For example, the grid layout adapts from single-column to dual-column at the lg breakpoint.

Similarly, text, padding, and visibility behaviors shift seamlessly between breakpoints without any custom CSS.

Animation Extensions

Custom animations such as fadeUp are defined in the config and referenced via utility classes to produce entry effects.

keyframes: {
  fadeUp: {
    '0%': { opacity: 0, transform: 'translateY(20px)' },
    '100%': { opacity: 1, transform: 'translateY(0)' }
  }
},
animation: {
  fadeUp: 'fadeUp 0.8s ease-out forwards'
}

These animations are useful for revealing sections, callouts, and toggled elements in a visually smooth way.

Avoiding Overhead

This setup is intentionally lightweight. It avoids bundlers, custom build steps, and compiled CSS pipelines. The benefits include: