npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

proto-stencil-tailwind

v0.0.111

Published

A TailwindCSS 2.x Plugin for Stencil... [ Prototype ]

Downloads

83

Readme

proto-stencil-tailwind

This package is used in order to integrate with the 2.x release of tailwindcss. It provides simple functionality for supporting a utility-first workflow within the Shadow DOM.

NOTE: this plugin specificially adds support for inline utilities... (idiomatic Tailwind)

Installation

First, yarn install within the project:

yarn add --dev proto-stencil-tailwind
yarn add --dev postcss 
yarn add --dev rollup
yarn add --dev tailwindcss

Next, within the project's stencil.config.js file:

  1. import the plugin
  2. update the plugins config
  3. update the reloadStrategy

stencil.config.ts

import { Config } from '@stencil/core'
import tailwind from 'proto-stencil-tailwind'

export const config: Config = {
  plugins: [
    tailwind()
  ],
  devServer: {
    reloadStrategy: 'pageReload'
  }
}

Create your Tailwind config file (optional)

While Tailwind provides a sensible default configuration, it is often desirable to further customize your theme. This default configuration can be used as a starting point for such customizations. To customize your Tailwind installation, you will first need to generate a config file for your project using the included Tailwind CLI utility when you install the proto-stencil-tailwind npm package.

npx tailwindcss init

This will generate a tailwind.config.js file at the root of your project.

Usage

Inline utilities

Utility classes can be used directly within JSX; they will be included in the component's shadow tree.

class MyComponent {
  render() {
    return (
      <div class="p-4 bg-red">
        <p class="text-sm text-white">This is JSX!</p>
      </div>
    );
  }
}

Options

The following plugin options may be configured:

stencil.config.ts

import { Config } from '@stencil/core'
import tailwindcss from 'tailwindcss'

export const config: Config = {
  plugins: [
    tailwind({
      tailwind: tailwindcss('tailwind.config.js'),
      inputFile: './src/styles/app.css',
      includeTailwindCss: false
    })
  ]
}
  • tailwind: (optional) your own configuration file and version of TailwindCSS to be used.
  • inputFile: (optional) a stylesheet filepath to be used in place of the default.
  • includeTailwindCss: (optional) include global tailwind.css in the bundle (default: true)

NOTE: adding an inputFile will give you the ability to support the creation of tailwind components...

Using the inputFile option

1. stencil.config.ts
import { Config } from '@stencil/core'
import tailwind from 'proto-stencil-tailwind'

export const config: Config = {
  plugins: [
    tailwind({
      inputFile: './src/styles/app.css'
    })
  ],
  devServer: {
    reloadStrategy: 'pageReload'
  }
}
2. src/styles/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

This simple combination of changes creates a tailwind component class named btn-blue which you could use in your app instead of typing:

"py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"

You can read more about this approach here:

tw utility

I found a handy utility that works well with this plugin:

const tw = (...classes: (false | null | undefined | string)[]): string => {
  return classes.filter(Boolean).join(' ');
};

export { tw };
export default tw;

This tw utility was developed for React, but it works just as well for Stencil and this plugin.

For example:

    <Logo
      className={tw(
        'relative',
        'w-full h-auto',
        'mt-2 mb-4',
        'text-blue-600 fill-current'
      )}
    />

You can use this to breakup the long class strings and it also gives you a way to provide conditional styling using ternary expressions:

    <div
      class={tw(
        'flex align-middle',
        'rounded-lg p-4 mb-1',
        'border border-solid',
        isExotic(group)
          ? 'bg-gray-300 border-gray-600'
          : 'bg-green-200 border-green-600',
      )}
    >

The plugin will correctly find all of the tailwind classes when using this approach and make them available in the associated component root. You can find the article about this trick in the references below.

VSCode

I found this plugin for VSCode useful when working with Tailwind:

plug

It's not perfect, but for the traditonal Tailwind workflow, it works pretty well (YMMV).

Credits

Thanks goes to Jack Rowlingson and all of the others who contributed to the Tailwind 1.x version of this plugin!!

References