Installation

Prerequisites

Ensure you have the following installed:

npm install tailwindcss-jun-layout

Then add the plugin to your tailwind.config.js:

// tailwind.config.js;
module.exports = {
  content: [
    // ...
  ],
  plugins: [
    // ...
    require("tailwindcss-jun-layout"),
  ],
};

Required at least v4.0.3 because the version lower has a bug related to CSS variables.

Use the new @plugin directive in your main CSS file:

@import "tailwindcss";
 
@plugin "tailwindcss-jun-layout";

Do not forget the ; at the end of the plugin import, otherwise Tailwind will throw an error.

After completing the installation, type jun- in a class. If you see the autocompletion like the image below, you are good to go.

Note: you must have Tailwind CSS IntelliSense installed first.