How to use NPM package component with Tailwind in JIT mode?

[gilsonnunesfilho]

The idea

Let me try to explain a little bit more. I was trying to create external component library that uses Tailwind under the hood wrapped in styled-components, like bellow:

import styled from 'styled-components'

export const Button = styled.button.attrs({
  className: `
    bg-theme-500
    py-3
    px-6
  `,
})``

This library was supposed to be our design system, and should be used on other applications, like so:

import { Button } from 'my-library'

function HomePage() {
  return <Button>Hello World!</Button>
}

I'd like to be able to use it like this as baseline components, and extend it when wanted:

import { Button } from 'my-library'

function HomePage() {
  return (
    <Button className='flex gap-2'>
      <span>👋</span>
      <span>Hello World!</span>
    </Button>
  )
}

The problem

When I published the components to NPM, and imported them on my app, the Tailwind's JIT mode couldn't pick up the CSS classes from my component, so I was unable to keep developing the app.

The temporary solution was to copy all the code as a local copy, but that's awkward having to copy/paste instead of import from the package.

Any suggestions?

Thank you very much if you read through down here.

[hacknug]

You should be able to solve that by specifying the path to your components inside node_modules. In my case it only required me to append /node_modules/@scope/package-name to the same paths I already use to purge the local project (I could add only three of them but I might use classes in some of the other dirs at some point so… 🤷‍♂️).

const { join } = require('path')
const { preset } = require('@scope/package-name/tailwind.config')

const mapDirs = (i) => join(__dirname, i)
const contentDirs = [
  '/components/**/*.{js,jsx,ts,tsx,vue}',
  '/layouts/**/*.{js,jsx,ts,tsx,vue}',
  '/middleware/**/*.{js,jsx,ts,tsx,vue}',
  '/mixins/**/*.{js,jsx,ts,tsx,vue}',
  '/pages/**/*.{js,jsx,ts,tsx,vue}',
  '/plugins/**/*.{js,jsx,ts,tsx,vue}',
  '/formulate.config.js',
  '/nuxt.config.js',
  '/tailwind.config.js',
]

module.exports = {
  mode: 'jit',
  presets: [preset],
  purge: {
    enable: true,
    content: [
      ...contentDirs.map(mapDirs),
      ...contentDirs.map((i) => `/node_modules/@koa-health/common${i}`).map(mapDirs),
    ],
  },
}