How to Integrate Tailwind CSS into your Stencil Project

Stencil
1

Originally published at: How to Integrate Tailwind CSS into your Stencil Project - Ionic Blog

Tailwind CSS has taken the CSS world by storm, and with good reason. Tailwind is a CSS framework that, at its core, supplies utility classes in an effort to make styling much easier. Tailwind offers a lot of additional features as well and has become especially popular in the world of design systems. While there…

3 Likes
2

i’ve been using these techniques for a while now. Started with the plugin approach and this works great if you have a lot of deeply nested web components in your project.

Recently i’ve been using the CLI for all of my projects because i only have a single web component at the root and everything under that is a functional component. This works great for smaller projects, YMMV.

Examples of this in action can be seen here:

3

Thanks again for sharing this. We are creating a design system with stencil components. Creating web components and wrapping them with react components to be used in react projects.

These reusable web components will be used in various micro-frontends which are built using webpack 5 module federation.

Out of the technique you shared in this post, which one of these will fit this use case. Can we use a mix of these? For example, we can use stencil-tailwind-plugin for web components, and then we can use tailwind-cli micro frontends.