Compile 3rd party library's CSS

[nadlambino]

Hi! I am using tailwind in my project and it is configured to have prefix when using tailwind classes. However, a 3rd party library that I am using uses tailwind without prefix. This cause failure during build step (prod and dev). What I've tried so far is to have a cssPrefixer function that will look for classes that were used in @apply directive and prefix it. I then use this function in the contents.transform.css section of the config. The function seems to work properly and returns the prefixed classes. However, the issue still persists. Is there any other way to work this around?

Here's my config

const prefixer = require("@vueform/vueform/tailwind-prefixer");

function cssPrefixer(content, prefix = "") {
  // Match @apply directive and the classes before the semicolon
  const applyRegex = /@apply\s+([^;]+);/g;

  content = content.replace(applyRegex, (match, classes) => {
    // Process each class individually
    const prefixedClasses = classes
      .split(/\s+/) // Split by spaces
      .map((cls) => {
        if (cls.startsWith("-")) {
          // If class starts with "-", insert prefix after the "-"
          return `-${prefix}${cls.slice(1)}`;
        } else if (cls.includes(":")) {
          // If class contains ":", insert prefix after ":"
          return cls.replace(/:/g, `:${prefix}`);
        } else {
          // For other cases, simply prefix the class
          return `${prefix}${cls}`;
        }
      })
      .join(" ");

    return `@apply ${prefixedClasses};`; // Reconstruct the @apply directive
  });

  return content;
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  /** tailwind has to have a prefix to not cause conflict with quasar's builting css */
  prefix: "tw-",
  content: {
    files: [
      "./src/**/*.{html,js,vue,ts}",
      "./vueform.config.js",
      "./node_modules/@vueform/vueform/themes/tailwind/**/*.vue",
      "./node_modules/@vueform/vueform/themes/tailwind/**/*.js",
      "./node_modules/@vueform/builder/**/*.js",
      "./node_modules/@vueform/builder/**/*.css",
    ],
    transform: {
      js: (content) => {
        return prefixer(content, "tw-");
      },
      css: (content) => {
        return cssPrefixer(content, "tw-");
      },
    },
  },
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: "#0E6C6A",
        secondary: "#6c757d",
        accent: "#D95D39",
        dark: "#1B3A4B",
        "dark-blue": "#101240",
        positive: "#28a745",
        negative: "#dc3545",
        info: "#17a2b8",
        warning: "#ffc107",
      },
    },
  },
  plugins: [
    require("@vueform/vueform/tailwind"),
    require("@vueform/builder/tailwind"),
  ],
};

[wongjn]

You should not have CSS files in the content.files array. Furthermore, the content.transform.css function will indeed not help you here. If you are running Tailwind as a PostCSS plugin, consider doing the prefixing work in a PostCSS plugin that runs before Tailwind.

[nadlambino]

Hi, can you help me understand how can postcss help me to work on this?

[wongjn]

Consider understanding PostCSS's documentation.