Frameworks and libraries
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
Tailwind CSS
To use Tailwind CSS with your code components, configure PostCSS to process Tailwind classes:
styled-components
To use styled-components with code components, install the @webflow/styled-components-utils
package and wrap your component in the StyledComponentsShadowDomProvider
.
Emotion
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.
Component libraries
Material UI
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.
Shadcn/UI
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:
Configure path aliases
Shadcn/UI uses path aliases that need to be configured in your webpack setup. Add this to your webpack configuration:
For detailed webpack configuration options, see the bundling and import guide.
Preprocessors & post-processing
Sass
Configure your project to use Sass with the following steps:
Less
Configure your project to use Less with the following steps:
Learn about additional configuration options in the bundling and import guide.
Next steps
Troubleshooting
Errors when sharing to Webflow
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.