Generate local css file from tailwind classes

[bb-face]

Hello everybody! I'm building a web application that uses a library that uses tailwind classes for its components. Since this scenario is limited in the application, is there a way to generate a local css file given a component that uses tailwind classes so I can just import that instead of importing the entire library?

[mutasim77]

Basically, you can do this by making some small changes in your tailwind.config.js file:

module.exports = {
  content: [
        "./path/to/component/MyComponent.jsx",   //   <-- If you only need it for a single component
        "./path/to/folder/*.{js,jsx,tsx}",   //   <-- If you need it for all components from the specific folder.
   ],

  theme: {
    extend: {},
  },
  plugins: [],
}

Then, after that, just run this command:

npx tailwindcss -i ./pathToYourGlobalCSS/global.css -o ./pathForOuputCSS/output.css

Now you can play around with the generated output.css file.

Important

• By default, in your content, you may have something like this: './components/**/*.{js,ts,jsx,tsx,mdx}', You should remove it; otherwise, it will generate for all components.
• global.css - is the file where you have your directives like @tailwind base;

[bb-face]

Works like a charm, thanks for the help!