Tailwind for Dummies -- setting up Stencil.js

tailwind-for-dummies.md

Tailwind for Dummies - the Stencil approach

I've been exploring using Stencil with Tailwind CSS and this is an attempt to document the different approaches to getting this to work...

Developer Workflows

I've tried 3 approaches to integrating Tailwind into Stencil:

1. a plugin solution using proto-stencil-tailwind
2. a plugin solution using stencil-tailwind-plugin
3. a postcss solution using @stencil/postcss (documented below)

Both of these favor slightly different workflows.

Plugin solution #1

The plugin solution favors adding Tailwind classes directly into your JSX (a traditional Tailwind workflow). It also supports using an src/styles/app.css file to define your Tailwind abstractions (using @apply). This works well for prototyping, where you are spending most of your time creating and tweaking styling in JSX. The component css files are treated as raw css and aren't parsed by the plugin, only the tsx files. This plugin currently doesn't support functional components in imported files (a definite restriction for some).

I was able to workaround this issue by creating utility functions that generate JSX in same file as my component. They effectively worked the same way as Functional components but where invoked in curly brackets in the JSX instead of being referenced as tags. This allowed the plugin to parse the Tailwind classes from those utilities and inject them into the component appropriately.

For what it's worth, the plugin approach appeared to generate smaller bundles than the postcss only solution...

You can find the plugin and it's documentation here:

• proto-stencil-tailwind

Plugin solution #2

This plugin appears to be more robust than the previous one. It favors a similar workflow and adds support for Functional components. This one also allows you to use @apply in the component css files, but i still prefer to define those in a src/styles/app.pcss file (YMMV). For example, this how i enable that:

    tailwind({
      tailwindCssPath: './src/styles/app.pcss',
      tailwindConf: tailwindConfig,
    }),

You can find the plugin and it's documentation here:

• stencil-tailwind-plugin

Postcss solution

The postcss solution mentioned below favors adding Tailwind abstractions to your component css files (via @apply). While you can still add Tailwind classes directly to the JSX, the devServer doesn't always reflect those changes. Adding Tailwind classes to abstractions in the component css files seems to always refresh properly, YMMV. That's the downside to this approach in my opinion. So it really depends on what sort of workflow you plan when using Tailwind with Stencil. I've tried to document the simplest setup for the postcss solution below.

Let's start with a simple Tailwind configuration:

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.css', './src/**/*.tsx'],
  },
  theme: {},
  variants: {},
  plugins: [],
};

Next, let's configure Stencil:

stencil.conf.ts

import { Config } from '@stencil/core';
import { postcss } from '@stencil/postcss';
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";
import cssnano from "cssnano";

export const config: Config = {
  namespace: 'proto-stencil-wc',
  devServer: {
    reloadStrategy: 'pageReload',
  },
  plugins: [
    postcss({
      plugins: [
        tailwindcss("./tailwind.config.js"),
        autoprefixer(),
        cssnano()
      ]
    }),
  ],
  ...
};

Then the next thing we'll need to do is add the required packages:

yarn add --dev postcss autoprefixer @stencil/postcss cssnano tailwindcss

That should get you up and running.

You can add the following to the top of your component css files to start using Tailwind:

@tailwind utilities;

This configuration supports adding inline classes in your JSX, as well as building abstrations within your component css files using @apply. If you are only adding inline classes in your JSX, you may need to restart the dev server to get the changes to show up. Changes made with @apply seem to always display properly in the dev server.

Hope this helps others get started...

Richard

• https://eswat2.dev