Translating a Custom Design System to Tailwind CSS

In this post, we’ll incorporate a visual example from the video, "Translating a Custom Design System to Tailwind CSS", to illustrate how to map a design system into a Tailwind configuration. Let’s dive into the specific details, enhanced by code snippets shared from the video.

---

Video Overview

The video outlines how to translate core design system elements, such as color palettes, typography, and responsive breakpoints, into a custom Tailwind CSS configuration. Below is an embedded link to the video for further learning:

---

Step-by-Step Custom Theme Configuration

1. Custom Screen Sizes

The design system includes specific breakpoints for responsiveness:

screens: {
  tablet: '960px',
  desktop: '1248px',
},

These breakpoints ensure that the layout adapts effectively for tablet and desktop views.

2. Color Palette

The color palette is directly mapped to Tailwind's theme configuration. The custom palette includes:

• White: #FFFFFF
• Purple: #3F3CBB
• Midnight: #121063
• Metal: #565584
• Tahiti Blue: #3AB7BF
• Cool White: #ECEBFF
• Bubble Gum: #FF77E9
• Copper Rust: #78DCCA

Here’s how it looks in Tailwind:

colors: {
  white: '#FFFFFF',
  purple: '#3F3CBB',
  midnight: '#121063',
  metal: '#565584',
  'tahiti-blue': '#3AB7BF',
  'cool-white': '#ECEBFF',
  'bubble-gum': '#FF77E9',
  'copper-rust': '#78DCCA',
},

3. Typography Settings

Custom font sizes and line heights were defined for scalability and readability:

fontSize: {
  xs: ['14px', { lineHeight: '24px', letterSpacing: '-0.03em' }],
  sm: ['16px', { lineHeight: '28px', letterSpacing: '-0.03em' }],
  lg: ['18px', { lineHeight: '28px', letterSpacing: '-0.03em' }],
  xl: ['24px', { lineHeight: '36px', letterSpacing: '-0.03em' }],
  '2xl': ['36px', { lineHeight: '48px', letterSpacing: '-0.032em' }],
  '3xl': ['48px', { lineHeight: '56px', letterSpacing: '-0.032em' }],
  '4xl': ['56px', { lineHeight: '64px', letterSpacing: '-0.032em' }],
  '5xl': ['80px', { lineHeight: '80px', letterSpacing: '-0.032em' }],
},

4. Font Families

Two custom font families, "Satoshi" and "Inter," were configured:

fontFamily: {
  satoshi: ['Satoshi', 'sans-serif'],
  inter: ['Inter', 'sans-serif'],
},

These fonts add a unique branding touch to the UI components.

5. Box Shadow

Custom shadow styles provide a polished visual hierarchy:

boxShadow: {
  sm: '0px 2px 4px 0px rgba(11, 10, 55, 0.15)',
  lg: '0px 8px 20px 0px rgba(18, 16, 99, 0.06)',
},

---

Final Tailwind Configuration

Here’s the complete tailwind.config.js file with the custom design system configurations:

module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      tablet: '960px',
      desktop: '1248px',
    },
    colors: {
      white: '#FFFFFF',
      purple: '#3F3CBB',
      midnight: '#121063',
      metal: '#565584',
      'tahiti-blue': '#3AB7BF',
      'cool-white': '#ECEBFF',
      'bubble-gum': '#FF77E9',
      'copper-rust': '#78DCCA',
    },
    boxShadow: {
      sm: '0px 2px 4px 0px rgba(11, 10, 55, 0.15)',
      lg: '0px 8px 20px 0px rgba(18, 16, 99, 0.06)',
    },
    fontSize: {
      xs: ['14px', { lineHeight: '24px', letterSpacing: '-0.03em' }],
      sm: ['16px', { lineHeight: '28px', letterSpacing: '-0.03em' }],
      lg: ['18px', { lineHeight: '28px', letterSpacing: '-0.03em' }],
      xl: ['24px', { lineHeight: '36px', letterSpacing: '-0.03em' }],
      '2xl': ['36px', { lineHeight: '48px', letterSpacing: '-0.032em' }],
      '3xl': ['48px', { lineHeight: '56px', letterSpacing: '-0.032em' }],
      '4xl': ['56px', { lineHeight: '64px', letterSpacing: '-0.032em' }],
      '5xl': ['80px', { lineHeight: '80px', letterSpacing: '-0.032em' }],
    },
    fontFamily: {
      satoshi: ['Satoshi', 'sans-serif'],
      inter: ['Inter', 'sans-serif'],
    },
    extend: {},
  },
  variants: {},
  plugins: [],
};
___

---

Applying the Theme

To implement this theme in your project:

1. Install Tailwind CSS and initialize the configuration file using:

   npx tailwindcss init
   

2. Replace the default theme section in tailwind.config.js with the configurations above.

---

Conclusion

By following the video’s guide and using the configurations shared, you can successfully transform a custom design system into a functional Tailwind CSS setup. This approach simplifies the development process while maintaining a consistent visual style.