include groundwork tailwind.config.js in build output?

[adamscarberry]

I may have found a solution to import the groundwork into a project that is also using tailwind.

My project's tailwind.config.js:

/* eslint-env node */

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require("./node_modules/@usace/groundwork/tailwind.config")],

  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@usace/groundwork/dist/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Notice the presets line. Docs here: https://tailwindcss.com/docs/configuration#presets

If the tailwind.config.js could be included in the groundwork package, any apps that use it can set it as a preset in their own tailwind.config.js file.

The tailwind.config.js is needed because without it the app that uses it doesn't seem to get the custom styles applied.

@willbreitkreutz

[willbreitkreutz]

@adamscarberry, @jbkolze I think I've got a fix for this in v2.3.0, do NOT use v2.2.0, it's super broken... 😢

I enabled the prefix option in the tailwind build for groundwork, which prepends gw- to each class in the output css, downside was having to go through and upate every class usage throughout the lib and demo site... I think I caught most of them, but there might be a few hanging.

[adamscarberry]

Thanks @willbreitkreutz that seems to work now for me. I reverted my tailwind.config.js back to:

/* eslint-env node */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};