Frameworks and libraries

Install Tailwind CSS

Install Tailwind CSS and its PostCSS plugin:

$
npm install tailwindcss @tailwindcss/postcss postcss

Configure PostCSS

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

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

Create Tailwind styles

Create a CSS file that imports Tailwind:

1
@import "tailwindcss";

Configure global decorators

Create a global decorators file that imports your Tailwind CSS:

1
import "./globals.css";

Then reference it in your webflow.json:

1
{
2
  "library": {
3
    "globals": "./src/globals.ts"
4
  }
5
}

Use Tailwind classes

Write your React components using Tailwind utility classes. The global styles are automatically applied to all components:

1
import * as React from "react";
2
3
interface BadgeProps {
4
  text: string;
5
  variant: 'Light' | 'Dark';
6
}
7
8
export 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
);

Install the styled-components utility library

Install the utility library:

$
npm i @webflow/styled-components-utils

$
npm i styled-components react react-dom

Configure global decorators

Create a global decorators file that exports the styled-components decorator:

1
import { styledComponentsShadowDomDecorator } from "@webflow/styled-components-utils";
2
3
export const decorators = [styledComponentsShadowDomDecorator];

Then reference it in your webflow.json:

1
{
2
  "library": {
3
    "globals": "./src/globals.ts"
4
  }
5
}

Use styled-components in your component

Write your React component using styled-components. The global decorator automatically wraps all components:

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

Install the Emotion utility library

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

$
npm i @webflow/emotion-utils

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

Configure global decorators

Create a global decorators file that exports the Emotion decorator:

1
import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
2
3
export const decorators = [emotionShadowDomDecorator];

Then reference it in your webflow.json:

1
{
2
  "library": {
3
    "globals": "./src/globals.ts"
4
  }
5
}

Use Emotion in your component

Write your React component using Emotion. The global decorator automatically wraps all components:

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

Install the Emotion utility library

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

$
npm i @webflow/emotion-utils

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

Configure global decorators

Create a globals file that exports the Emotion decorator:

1
import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
2
3
export const decorators = [emotionShadowDomDecorator];

Then reference it in your webflow.json:

1
{
2
  "library": {
3
    "globals": "./src/globals.ts"
4
  }
5
}

Use Material UI in your component

Write your React component using Material UI. The global decorator automatically wraps all components:

1
import React from "react";
2
import { Button } from "@mui/material";
3
4
interface ButtonProps {
5
  children: React.ReactNode;
6
  variant?: "text" | "outlined" | "contained";
7
  color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
8
  onClick?: () => void;
9
}
10
11
export const CustomButton = ({
12
  children,
13
  variant = "contained",
14
  color = "primary",
15
  onClick,
16
}: ButtonProps) => {
17
  return (
18
    <Button variant={variant} color={color} onClick={onClick}>
19
      {children}
20
    </Button>
21
  );
22
};

Configure path aliases

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

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

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

Install the Sass loaders

Install the loaders as development dependencies:

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

Create a custom webpack configuration

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

1
module.exports = {
2
module: {
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
}

Update your Webflow configuration

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

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

Use Sass in your code component

Import Sass in your code component definition file:

1
import '../styles/button.scss';
2
3
// Declare the component

Install the Less loaders

Install the loaders as development dependencies:

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

Create a custom webpack configuration

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

1
// webpack.webflow.js
2
module.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
  };

Update your Webflow configuration

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

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

Use less in your code component

Import less in your code component definition file:

1
import '../styles/button.less';
2
3
// Declare the component