Make it possible for plugins to add paths to the content configuration

[bene]

Tailwind CSS is becoming more and more popular and we see a lot of public and private libraries using it. This leads to a common pattern. When a library is using Tailwind the user has to add the path of the template files to the project config like this example from the documentation illustrated:

module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
    './node_modules/@my-company/tailwind-components/**/*.js',
  ],
  // ...
}

I think it would be great if the Tailwind plugin API adds a way for plugins to do this instead of the user. My proposed idea is the following:

module.exports = {
  content: [
    './components/**/*.{html,js}',
    './pages/**/*.{html,js}',
  ],
  plugins: [
    require('@my-company/tailwind-components/plugin')
  ]
}

The implementation of @my-company/tailwind-components/plugin would look like this:

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addContentPath }) {
  addContentPath('./src/components/**/*.{ts,tsx}')
})

This would only be a small improvement, but I think it makes the config cleaner and it would ensures the right paths are configured. In addition to that many libraries use the plugin API already. Has anyone else thought about such a use case? Would be happy to hear some feedback! 😊

[philipp-spiess]

Hey! We thought about this for Tailwind V4 where the fact that you can now define those configuration values inside CSS makes it so that the plugin boundary is no longer a JavaScript module but instead you can make it a .css file that the plugin users can import. Here's how this could look like: https://x.com/adamwathan/status/1819427336502047227

We've just recently released published the first version of the custom @source directive for V4 but we're still working on improving @plugin to be more complete. So you might be able to give this a try already but the plugin system might not be complete yet.

[bene]

Hey, thanks for the response! I think this approach is very neat, however in some cases there is no CSS file at all in a project (thinking of an Astro project). In such cases the solution via the plugin API may still make sense?

[jonasms]

@philipp-spiess are you familiar w/ how to implement this css-based way of specifying a node_module as content? Based on the X post you linked to, I haven't been able to get this to work.

Note: I got this working with Taildwindcss@3.4, specifying the path in the config's content list.

In my ui library package I have an index.css file:

@source "./dist/**/*.{js,jsx,ts,tsx}"

(hav also tried the following variations)

@source "./src/**/*.{js,jsx,ts,tsx}"
@source "./dist/**/*.{js,jsx}"

I'm under the impression that at this stage I should be targeting the .js files.

In a consuming NextJS app, I have global.css

@import 'tailwindcss';
@import '@diablo-systems/ui';   /* The ui lib */

In the consuming app/s node_modules I have

@diablo-systems/
    ui/
       dist/  */ contains .d.js and .js files */
       src/  */ contains .ts and .tsx files */
       index.css

I'm successfully importing a component from the ui lib like so

import { Button } from "@diablo-systems/ui";

Button is defined using Tailwind classes but is rendering un-styled. However, on the same page I'm successfully rendering some styled divs.

Do you have any ideas of what I should try next?

[adamwathan]

Hey! Can you share the actual package so we can take a look and play with it? Seems to not be on npm:

https://www.npmjs.com/package/@diablo-systems/ui

[jonasms]

It's a private repo (for now), not a published package. I just sent you an invitation to it. If you need to share w/ your team, feel free to fork (if you're able to).