Can't access tailwind values

bud
1

Following bud-tailwindcss docs I can’t retrieve any value:

// bud.config.mjs
  app.tailwind.generateImports();

// any .ts or .vue file
import {xl} from '@tailwind/screens';
console.log(xl); // => undefined

I’m I missing something ?

1 Like
2

From the docs, it does seem like that should work. We’re using this functionality, but have specified a config key.

Do you have any success with the following?

app.tailwind.generateImports(['screens']);

1 Like
3

It doesn’t work either :s

4

Did you find a solution?
Get the same problem, but if you import the whole object it works fine.

import screens from '@tailwind/screens';

console.log(screens);

However, I can’t seem to get the extended values set in tailwind.config.js

5

From @kellymears via our Discord server:

So far I have been unable to reproduce an issue with this functionality.
added the following to bud.config.js:

app.tailwind.generateImports([`colors`, `lineHeight`])

then in resources/scripts/app.js:

import colors from '@tailwind/colors';
import lineHeight from '@tailwind/lineHeight';

console.log(colors.blue[`600`], lineHeight.none);

which seems to work. excerpt from compilation:

// ...
    './scripts/app.js': function () {
      console.log('#2563eb', '1');
    },
// ...

i tried it using a tailwind config set in bud.config.js and it seems to also work:

app.tailwind
  .setConfig({
    content: ['./index.php'],
    theme: {
      extend: {
        colors: {},
      },
    },
    plugins: [],
  })
  .generateImports([`colors`, `lineHeight`]);
6

Upgrading to BudJS 6.20.0 solved it for me.

1 Like