How to Integrate Tailwind CSS into your Stencil Project

How to Integrate Tailwind CSS into your Stencil Project ionicframework.com3 months ago in #Dev Love40

Tailwind CSS has taken the CSS global by means of hurricane, and with just right explanation why. Tailwind is a CSS framework that, at its core, provides application categories in an effort to make styling a lot more uncomplicated. Tailwind gives numerous further options as neatly and has grow to be particularly widespread on the planet of design programs. While there isn’t one “proper” manner to combine Tailwind into a Stencil task, many contributors of the group have get a hold of their very own answers which can be suited to their particular person use instances. In this put up, we’d like to spotlight a few of the ones group answers and supply a holistic view of various tactics you’ll be able to use Tailwind with Stencil. Using a Stencil Tailwind plugin The first manner you’ll be able to combine Tailwind into your Stencil task is with the stencil-tailwind-plugin created by means of @Poimen. Using this plugin calls for little or no setup and will get you up and working with Tailwind reasonably temporarily. In order to use this plugin, we’ll first have to set up some dependencies: npm i tailwindcss stencil-tailwind-plugin typescript –save-dev Next, we’ll want to configure the plugin in our stencil.config.ts report by means of uploading tailwind and tailwindHMR from stencil-tailwind-plugin and including them to our plugins array. import { Config } from ‘@stencil/core’; import tailwind, { tailwindHMR } from ‘stencil-tailwind-plugin’; export const config: Config = { namespace: ‘my-project’, plugins: [ tailwind(), tailwindHMR(), ], // … } NOTE: These plugins settle for numerous other configuration choices for extra customization. You can learn extra about those choices within the plugin’s readme And the ones two steps are all we’d like! With the plugin put in and configured, we will now get started the use of Tailwind application categories in our Stencil parts. Let’s check out an instance aspect: import { Component, h } from ‘@stencil/core’; @Component({ tag: ‘tailwind-component’, shadow: true, }) export elegance TailwindComponent { render() { go back ( This is a Stencil aspect the use of Tailwind ); } } And this is the end result: You might understand that this plugin lets in you to use Tailwind with shadow DOM parts proper out of the field, which might another way require some further paintings. This setup is solely intended to get you began. There’s so a lot more you’ll be able to do with this plugin. I urge you to take a look at the stencil-tailwind-plugin readme and notice the entirety the plugin has to be offering. For a extra evolved instance, checkout @Poimen’s instance repo that uses the plugin. Using Global Styles and the Tailwind CLI The Stencil Tailwind plugin is excellent, however some other folks won’t need to depend on a 3rd birthday party plugin for his or her Tailwind integration. If that sounds such as you, then you can be extra on this subsequent resolution from @snaptopixel. The normal concept in the back of this way is to level Stencil’s globalStyle to Tailwind’s compiled output. Before we get began with this implementation, we’ll want to set up Tailwind as a dev dependency: npm i tailwindcss –save-dev For this resolution, we’re going to get started within the stencil.config.ts report. This resolution leverages the www output goal, so we’ll want to be sure that it’s incorporated within the outputTargets array. We’ll additionally want to specify an international stylesheet for the task by means of giving globalStyle a price of ‘www/tailwind.css’. This tailwind.css report doesn’t exist but, however will likely be generated in a while. All in all, our stencil.config.ts report will have to glance…

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply