Tailwind CSS Colors with Styled Components

Bridging Tailwind Colors and Styled Components

Styled-components uses CSS-in-JS while Tailwind uses utility classes. You can bridge them with twin.macro for direct Tailwind-in-JS or share color tokens via CSS custom properties.

Using twin.macro

import tw, { styled } from 'twin.macro';

const Button = styled.button`
  ${tw`bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700`}
`;

const Card = styled.div`
  ${tw`bg-white dark:bg-slate-800 shadow-lg rounded-xl p-6`}
  ${tw`border border-slate-200 dark:border-slate-700`}
`;

Shared CSS Variable Approach

// Use CSS variables defined by Tailwind in styled-components
import styled from 'styled-components';

const Alert = styled.div`
  background-color: rgb(var(--color-primary) / 0.1);
  color: rgb(var(--color-primary));
  border: 1px solid rgb(var(--color-primary) / 0.3);
  padding: 1rem;
  border-radius: 0.5rem;
`;

Choosing the Right Strategy

• twin.macro: Full Tailwind syntax inside styled-components, zero runtime overhead
• CSS variables: Framework-agnostic, works without extra build tooling
• Direct import of Tailwind config: Access color values programmatically via resolveConfig
• Consider migrating fully to Tailwind utilities for simpler maintenance