Has anyone managed to get the tailwind container queries plugin working with Bud?

bud
,
1

I have been trying to get the official tailwind plugin for container queries working in a vanilla install of Sage 10 / Bud 6.22.1

I notice that the stock install uses ESM, whereas the Tailwind official plugin documentation shows it using CJS GitHub - tailwindlabs/tailwindcss-container-queries: A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.


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

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/container-queries'),
    // ...
  ],

So I changed the tailwind.config.js file to the following:

/** @type {import('tailwindcss').Config} config */

import containerQueries from '@tailwindcss/container-queries';

const config = {
  content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    extend: {
      colors: {}, // Extend Tailwind's default colors
    },
  },
  plugins: [
    containerQueries
  ],
};

export default config;

Which results in no compile errors and seems fine. Using any @container classes in my views does not pull in any of the Tailwind Container Query code.

Some of my thoughts:

  • Is this a blade issue where it is getting confused with the @ prefix? I tried escaping it using @@ and still no joy
  • Should I instead load the plugin from my bud.config.js like so:
import containerQueries from "@tailwindcss/container-queries";
...
  app.tailwind.setPlugins([containerQueries]);

That did not work either.

Any help appreciated!

2 Likes
2

Hey @drbroad,

I can confirm that it’s working using Sage 10.8.2 and bud 6.23.1 (I suppose you meant that one since theres no 6.22.1) using the ESM Import. Just like the tailwind.config.js you posted.

In the view files I’m able use the respective classes “as is” without the need to escape them.

  1. Can you show an example of what you have tried in your view files?
  2. Can you show the contents of your package.json File?

Make sure to use the same version for all @roots packages to avoid troubles.

You can also try to delete your node_modules Folder and yarn.lock File and reinstall all the packages and see if it works then.

2 Likes