Tailwind Setup

Hybrid Development & Production Setup

The project uses a hybrid approach for styling. For local development, Tailwind is delivered via its CDN script, which enables rapid prototyping without a build step. The configuration is extended client-side with a separate script. For production, a GitHub Actions workflow compiles a minified CSS file containing only the necessary styles, which is then linked in the final HTML, optimizing performance.

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

The local development setup is intentionally lightweight. By using the CDN, it avoids bundlers and local build steps, offering several benefits for authoring: