Skip to main content

​
Overview

This portfolio uses Tailwind CSS v3.4.6 with custom configurations to create a Spotify-themed design system. The configuration extends the default theme with custom colors, animations, and utility classes.

​
Configuration File

The main configuration is located at tailwind.config.ts:1: 
import type { Config } from "tailwindcss";

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
const {
  default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      animation: {
        scroll:
          "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
      },
      keyframes: {
        scroll: {
          to: {
            transform: "translate(calc(-50% - 0.5rem))",
          },
        },
      },
      colors: {
        spotify: {
          green: "#1DB954",
          black: "#191414",
          white: "#FFFFFF",
          grey: "#B3B3B3",
        },
      },
    },
  },
  plugins: [require("@tailwindcss/typography"), addVariablesForColors],
};
export default config;

​
Content Paths

Tailwind scans these directories for class usage:
  • ./src/pages/**/*.{js,ts,jsx,tsx,mdx} - All page files
  • ./src/components/**/*.{js,ts,jsx,tsx,mdx} - All component files
  • ./src/app/**/*.{js,ts,jsx,tsx,mdx} - All app directory files
The content configuration ensures Tailwind includes only the CSS classes that are actually used in your components, keeping the final CSS bundle size optimized.

​
Custom Spotify Theme Colors

The configuration extends Tailwind’s color palette with Spotify brand colors at tailwind.config.ts:29: 
colors: {
  spotify: {
    green: "#1DB954",  // Primary brand color
    black: "#191414",  // Background color
    white: "#FFFFFF",  // Text color
    grey: "#B3B3B3",   // Secondary text
  },
}

​
Color Usage

  • spotify-green (#1DB954): Primary actions, highlights, and interactive elements
  • spotify-black (#191414): Main background color
  • spotify-white (#FFFFFF): Primary text color
  • spotify-grey (#B3B3B3): Secondary text and subtle elements

​
Custom Animations

The config includes a custom scroll animation at tailwind.config.ts:18 for infinite scrolling components: 
animation: {
  scroll:
    "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
},
keyframes: {
  scroll: {
    to: {
      transform: "translate(calc(-50% - 0.5rem))",
    },
  },
},

​
Animation Properties

  • Duration: Controlled by CSS variable --animation-duration (default: 40s)
  • Direction: Controlled by CSS variable --animation-direction (default: forwards)
  • Timing: Linear interpolation
  • Loop: Infinite repetition
The scroll animation uses CSS variables to allow dynamic control of speed and direction from JavaScript, making it reusable across different components.

​
Plugins

Two plugins are configured at tailwind.config.ts:39:

​
1. Typography Plugin

npm install @tailwindcss/typography
Provides beautiful typography defaults with the prose class. Perfect for blog posts and markdown content. Usage: 
<article className="prose prose-invert">
  {/* Your markdown content */}
</article>

​
2. Color Variables Plugin

Custom plugin that converts all Tailwind colors to CSS variables at tailwind.config.ts:43: 
function addVariablesForColors({ addBase, theme }: any) {
  let allColors = flattenColorPalette(theme("colors"));
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
  );

  addBase({
    ":root": newVars,
  });
}
Benefits:
  • Access any color as a CSS variable: var(--spotify-green)
  • Use in style attributes and CSS-in-JS
  • Enable dynamic theming and color manipulation

​
PostCSS Configuration

The PostCSS configuration at postcss.config.mjs:1 processes Tailwind: 
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
PostCSS is automatically configured by Next.js. This minimal setup is all you need to enable Tailwind CSS processing.

​
Dependencies

From package.json:1, the styling-related dependencies are: 
{
  "dependencies": {
    "@tailwindcss/typography": "^0.5.16",
    "clsx": "^2.1.1",
    "tailwind-merge": "^2.4.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.6"
  }
}

​
Key Packages

  • tailwindcss: Core framework
  • autoprefixer: Adds vendor prefixes automatically
  • @tailwindcss/typography: Typography plugin
  • tailwind-merge: Utility for merging Tailwind classes
  • clsx: Utility for constructing className strings

​
Next Steps

Theme Customization

Learn how to customize colors and create your own theme

Animations

Explore custom animations and Framer Motion integration

Build docs developers (and LLMs) love

Get started for freeTalk to us