Styling and Theming

DevLink exports your Webflow styles as CSS, giving you full control over how components look in your React application. You can maintain design consistency while adding custom theming, responsive behavior, and component variants.

Global CSS setup

DevLink generates a global.css file containing base styles, responsive breakpoints, and CSS variables from your Webflow project. Import it once at your app’s root to apply Webflow’s design system globally:

1
import "@/devlink/global.css";

Override with CSS modules

The safest way to customize DevLink components is by attaching your own CSS Module classes via the className prop. This approach preserves Webflow’s original styles while adding your customizations:

1
.fancyButton {
2
  border-radius: 8px;
3
  padding: 1rem 2rem;
4
}

Reuse Webflow classes and variables

DevLink exports your Webflow project’s class names and CSS variables, enabling you to build custom components that match your design system. This approach is ideal for components with dynamic data or complex interactions that you wouldn’t build in Webflow:

Custom-built React component:

1
import "./ProductCard.module.css";
2
3
interface ProductCardProps {
4
  product: {
5
    id: string;
6
    name: string;
7
    price: number;
8
    image: string;
9
  };
10
  onAddToCart: (productId: string) => void;
11
}
12
13
export function ProductCard({ product, onAddToCart }: ProductCardProps) {
14
  return (
15
    <div className="webflow-card">
16
      <img 
17
        src={product.image} 
18
        alt={product.name}
19
        className="webflow-card-image"
20
      />
21
      <div className="webflow-card-content">
22
        <h3 className="webflow-heading-small">{product.name}</h3>
23
        <p className="webflow-text-large">${product.price}</p>
24
        <button 
25
          className="webflow-button-primary"
26
          onClick={() => onAddToCart(product.id)}
27
        >
28
          Add to Cart
29
        </button>
30
      </div>
31
    </div>
32
  );
33
}

Additionally, you can reuse component classes from your Webflow project in your custom-built React components, by importing the CSS module into your custom component styles.

Custom Identifiers

DevLink automatically transforms custom IDs into safe, namespaced selectors using CSS Modules, preventing style conflicts when components are used in larger React apps.

Custom IDs are transformed into the following format:

<ComponentName>_<custom-id>__<unique-identifier>

For example, a custom ID of featured-section on a Grid element within a Hero component may become: Hero_featured-section__abc123

Use attribute selectors with wildcards to style elements reliably:

1
/* Target elements with custom IDs */
2
[id*="ProductGrid_featured-section__"] {
3
  background-color: var(--color-accent);
4
  padding: var(--spacing-large);
5
}
6
7
/* Target elements with custom attributes */
8
[data-category="electronics"] {
9
  border: 2px solid var(--color-primary);
10
}
11
12
[data-product-count] {
13
  position: relative;
14
}

Avoid dynamic IDs

Some Webflow elements (like Grid or Quick Stack) rely on fixed IDs for CSS. If you replace them dynamically in React, the exported CSS will no longer apply. Instead, use custom attributes to keep Webflow’s styling intact while allowing you to attach your own identifier.

1
// ❌ This breaks Webflow’s generated CSS
2
<Grid id={sectionId} />

1
// ✅ Use custom attributes instead
2
<Grid 
3
  data-section-id={sectionId} 
4
/>

CSS-in-JS integration

If your project uses styled-components or emotion, you can wrap DevLink components with styled overrides. This approach works well for component variants and theme-based styling:

1
import styled from "styled-components";
2
import { Button } from "@/devlink";
3
4
const DangerButton = styled(Button)`
5
  background-color: red;
6
  border-radius: 4px;
7
  color: white;
8
`;
9
10
<DangerButton>Delete</DangerButton>

Tailwind CSS integration

Prevent style conflicts

To avoid conflicts between DevLink’s global styles and Tailwind’s reset, enable skipTagSelectors in your DevLink configuration:

1
{
2
  "devlink": {
3
    "skipTagSelectors": true
4
  }
5
}

Control style priority

To give DevLink styles higher priority over Tailwind’s reset, add a custom layer to your CSS:

1
@layer base, components, utilities, devlink;