Frameworks and libraries

Learn how to use CSS frameworks and component libraries with code components.

Code Components work with a wide range of styling approaches, including CSS preprocessors, utility frameworks, and component/style libraries.

Because Code Components render inside a Shadow DOM, some tools that inject styles into the global document.head need additional configuration to scope styles correctly. Webflow provides utilities for popular CSS-in-JS libraries (e.g. Emotion, styled-components) so they can inject styles directly into the Shadow Root.

Most setups just require a small addition to your webpack configuration and an import in your component. For CSS-in-JS solutions, you’ll wrap your components in a Shadow DOM provider.

CSS frameworks

To use Tailwind CSS with your code components, configure PostCSS to process Tailwind classes:

1

Install Tailwind CSS

Install Tailwind CSS and its PostCSS plugin:

$npm install tailwindcss @tailwindcss/postcss postcss
2

Configure PostCSS

Add the Tailwind PostCSS plugin to your postcss.config.mjs file:

postcss.config.mjs
1const config = {
2 plugins: {
3 "@tailwindcss/postcss": {},
4 },
5};
6
7export default config;
3

Import Tailwind styles

Import Tailwind in your main CSS file:

globals.css
1@import "tailwindcss";
4

Import styles in your component

Import your CSS file in each code component:

Badge.webflow.tsx
1import { Badge } from './Badge';
2import { props } from '@webflow/data-types';
3import { declareComponent } from '@webflow/react';
4
5import './globals.css'; // Import your styles
6
7export default declareComponent(Badge, {
8 name: 'Badge',
9 description: 'A badge with variants',
10 group: 'Info',
11 props: {
12 text: props.Text({
13 name: "Text",
14 defaultValue: "Hello World",
15 }),
16 variant: props.Variant({
17 name: "Variant",
18 options: ["Light", "Dark"],
19 defaultValue: "Light",
20 }),
21 },
22});
5

Use Tailwind classes

Now you can use Tailwind utility classes in your components:

Badge.tsx
1import * as React from "react";
2
3interface BadgeProps {
4 text: string;
5 variant: 'Light' | 'Dark';
6}
7
8export const Badge = ({ text, variant }: BadgeProps) => (
9 <span
10 className={`inline-block rounded-full px-3 py-1 text-sm font-medium ${
11 variant === 'Light'
12 ? 'bg-gray-100 text-gray-800'
13 : 'bg-gray-800 text-white'
14 }`}
15 >
16 {text}
17 </span>
18);

To use styled-components with code components, install the @webflow/styled-components-utils package and wrap your component in the StyledComponentsShadowDomProvider.

1

Install the styled-components utility library

Install the utility library:

$npm i @webflow/styled-components-utils

This package requires the following peer dependencies:

$npm i styled-components react react-dom
2

Wrap your component in the Shadow DOM provider

In your React component, wrap your component in the StyledComponentsShadowDomProvider component:

1import React from "react";
2import { StyledComponentsShadowDomProvider } from "@webflow/styled-components-utils";
3import styled from "styled-components";
4
5const StyledButton = styled.button`
6 background-color: #007bff;
7`;
8
9interface ButtonProps {
10 buttonText: string;
11}
12
13export const Button = ({ buttonText }: ButtonProps) => {
14 return (
15 <StyledComponentsShadowDomProvider>
16 <StyledButton>{buttonText}</StyledButton>
17 </StyledComponentsShadowDomProvider>
18 );
19}

To use Emotion with code components, install the @webflow/emotion-utils package and wrap your components in the EmotionCacheShadowDomProvider. The provider automatically detects whether it’s running inside a Shadow DOM and configures Emotion’s cache accordingly. When inside a Shadow DOM, it injects styles into the Shadow Root; otherwise, it falls back to the document head.

1

Install the Emotion utility library

In your terminal, run the following command to install the Emotion utility package:

$npm i @webflow/emotion-utils

This package requires the following peer dependencies:

$npm i @emotion/cache @emotion/react react react-dom
2

Wrap your React component in the Shadow DOM provider

In your React component, wrap your component in the EmotionCacheShadowDomProvider component:

1import React from "react";
2import { EmotionCacheShadowDomProvider } from "@webflow/emotion-utils";
3import styled from "@emotion/styled";
4
5const StyledButton = styled.button`
6 background-color: #007bff;
7`;
8
9interface ButtonProps {
10 buttonText: string;
11}
12
13export const Button = ({ buttonText }: ButtonProps) => {
14 return (
15 <EmotionCacheShadowDomProvider>
16 <StyledButton>{buttonText}</StyledButton>
17 </EmotionCacheShadowDomProvider>
18 );
19}

Component libraries

To use Material UI with Emotion, install the @webflow/emotion-utils package and wrap your components in the EmotionCacheShadowDomProvider. The provider automatically detects whether it’s running inside a Shadow DOM and configures Emotion’s cache accordingly. When inside a Shadow DOM, it injects styles into the Shadow Root, otherwise, it falls back to the document head.

1

Install the Emotion utility library

In your terminal, run the following command to install the Emotion utility package:

$npm i @webflow/emotion-utils

This package requires the following peer dependencies:

$npm i @mui/material @emotion/react @emotion/cache
2

Wrap your component in the Shadow DOM provider

In your React component, wrap your component in the EmotionCacheShadowDomProvider component:

1import React from "react";
2import { Button } from "@mui/material";
3import { EmotionCacheShadowDomProvider } from "@webflow/emotion-utils";
4
5interface ButtonProps {
6 /** Button text content */
7 children: React.ReactNode;
8 /** Button variant style */
9 variant?: "text" | "outlined" | "contained";
10 /** Button color */
11 color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
12 /** Click handler */
13 onClick?: () => void;
14}
15
16/**
17 * A customizable button component built on Material-UI
18 */
19export const CustomButton = ({
20 children,
21 variant = "contained",
22 color = "primary",
23 onClick,
24}: ButtonProps) => {
25 return (
26 <EmotionCacheShadowDomProvider>
27 <Button
28 variant={variant}
29 color={color}
30 onClick={onClick}
31 >
32 {children}
33 </Button>
34 </EmotionCacheShadowDomProvider>
35 );
36};

Shadcn/UI is a component library built on Tailwind CSS that provides pre-built, accessible React components. It works with code components but requires path alias configuration. Follow these steps after setting up Tailwind CSS:

1

Configure path aliases

Shadcn/UI uses path aliases that need to be configured in your webpack setup. Add this to your webpack configuration:

webpack.webflow.js
1module.exports = {
2 resolve: {
3 alias: {
4 "@": process.cwd(), // Maps @ to your project root
5 },
6 },
7};
8

For detailed webpack configuration options, see the bundling and import guide.

Preprocessors & post-processing

Configure your project to use Sass with the following steps:

1

Install the Sass loaders

Install the loaders as development dependencies:

$npm install --save-dev sass sass-loader
2

Create a custom webpack configuration

Create a webpack.webflow.js file to customize the webpack configuration to use the Sass loader:

webpack.webflow.js
1module.exports = {
2module: {
3 rules: (currentRules) => {
4 const currentCSSRule = currentRules.find(
5 (rule) =>
6 rule.test instanceof RegExp &&
7 rule.test.test("test.css") &&
8 Array.isArray(rule.use)
9 );
10 return [
11 ...currentRules,
12 {
13 test: /\.scss$/,
14 use: [...currentCSSRule.use, "sass-loader"],
15 },
16 ];
17 },
18 }
19}
3

Update your Webflow configuration

Update your webflow.json file to use the custom webpack configuration:

webflow.json
1{
2 "library": {
3 "name": "React Components Library",
4 "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
5 "bundleConfig": "./webpack.webflow.js"
6 }
7 }
8
4

Use Sass in your code component

Import Sass in your code component definition file:

src/components/Button.webflow.tsx
1import '../styles/button.scss';
2
3// Declare the component

Configure your project to use Less with the following steps:

1

Install the Less loaders

Install the loaders as development dependencies:

$npm install --save-dev less less-loader
2

Create a custom webpack configuration

Create a webpack.webflow.js file to customize the webpack configuration to use the Sass loader:

webpack.webflow.js
1// webpack.webflow.js
2module.exports = {
3 module: {
4 rules: (currentRules) => {
5 const currentCSSRule = currentRules.find(
6 (rule) =>
7 rule.test instanceof RegExp &&
8 rule.test.test("test.css") &&
9 Array.isArray(rule.use)
10 );
11
12 return [
13 ...currentRules,
14 {
15 test: /\.less$/i,
16 use: [...currentCSSRule.use, "less-loader"],
17 },
18 ];
19 },
20 },
21 };
22
3

Update your Webflow configuration

Update your webflow.json file to use the custom webpack configuration:

webflow.json
1{
2 "library": {
3 "name": "React Components Library",
4 "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
5 "bundleConfig": "./webpack.webflow.js"
6 }
7 }
8
4

Use less in your code component

Import less in your code component definition file:

src/components/Button.webflow.tsx
1import '../styles/button.less';
2
3// Declare the component

Learn about additional configuration options in the bundling and import guide.

Next steps

Troubleshooting

If you’re getting errors when sharing to Webflow, try the following:

  • Ensure you’ve installed the Webflow CLI locally within the project. If you have a global installation, try running the command with npx to ensure the correct version is being used.