Breeze witth Tailwind CSS

[deniscass]

Hello everyone, what is the best way to include a CSS processor like Tailwind CSS in the layout construction integrated with Breeze?

[JDavidVR]

Hey! @deniscass

I've got same question months ago but I wanted it for a luma project. (at this point to use talwind in a project is buying Hyva)

But I'm working on a module that adds tailwindcss to any magento theme (it includes luma & breeze).

I've already have a dirty/alpha prototype (various things are hardcoded) but it works!

Some features I'm working:

• Any theme can have own tailwind configs
• Dynamic content based on Module Status (disabled modules will be ignored in final css generation)
• Add tailwind:watch command

Right now module is using tailwindcss v3 but I'm evaluating if I should focus on v4 (looks like it will be released on early 2025)

I guess I'll finish the module in about 2 weeks or less

[vovayatsyuk]

Here is a starting point based on tailwind installation instructions.

1. Install Tailwind CSS

cd <magento_root>
npm install -D tailwindcss
npx tailwindcss init

2. Configure Tailwind CSS

Replace tailwind.config.js content with:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./app/design/frontend/{{VENDOR}}/{{THEME}}/**/*.{xml,phtml,html,css,less,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Create tailwind-src.css

Create app/design/frontend/{{VENDOR}}/{{THEME}}/web/css/tailwind-src.css with following content:

/* @tailwind base; */
/* @tailwind components; */
@tailwind utilities;

.header.content {
    @apply bg-pink-500;
}

4. Create tailwind-dist.css

Create app/design/frontend/{{VENDOR}}/{{THEME}}/web/css/tailwind-dist.css and keep it empty.

5. Inject tailwind-dist.css into breeze styles

Open or create app/design/frontend/{{VENDOR}}/{{THEME}}/web/css/_extend.less and add the following code:

& when (@critical) {
    @import 'tailwind-dist.css';
}

6. Run tailwindcss

Run the following command. It will parse all files in your theme, generate styles, and put them into tailwind-dist.css:

npx tailwindcss -i ./app/design/frontend/{{VENDOR}}/{{THEME}}/web/css/tailwind-src.css -o ./app/design/frontend/{{VENDOR}}/{{THEME}}/web/css/tailwind-dist.css --watch