Tailwind and create-bud-app

bud
,
1

I wanted to try a standalone JS app using bud using npx create-bud-app with Tailwind.

It sounds so easy when you read the description on GitHub: Run yarn add @roots/bud-tailwindcss --dev then “By default the bud.js tailwind implementation requires no configuration.”

But Tailwind styles will not work, and I get Property 'tailwind' does not exist on type 'Bud' any attempt to configure in bud.config.js as per the instructions.

No idea what’s wrong. I followed the docs to the letter but something is obviously missing.

Going back to Laravel Mix for now but if anyone has experience of getting an npx create-bud-app up and running with working Tailwind, I’d love to hear about it. Thanks!

2

It probably doesn’t need any configuration if the rest of the app is structured with the defaults required

When you run npx create-bud-app you get prompted about adding support for various tools, and one of those options is to add Tailwind support

I just tried creating a new app with Tailwind support this way and I wasn’t able to hit the error that you’re describing

Can you push up a repo that has all the code so we can take a look? Or can you try using create-bud-app again and selecting Tailwind support? You don’t need to be manually adding the @roots/bud-tailwindcss package if you select Tailwind support

3

Sure - I’ll get the repo up tonight

I did select the Tailwind support option when creating the app in the first place.

I’ll start again from absolute scratch just to make sure it’s a minimal case.

Thanks

4

Make sure Tailwind is actually selected when going through the prompts, otherwise it’ll show:

:heavy_check_mark: Add support for libraries & frameworks · No items were selected

You can use the space bar to select the option when you reach it:

image
image1356×564 53.2 KB

5

Thank you Ben. This is completely on me - I failed to press the spacebar to select the items. Doh.

Apologies for wasting your time, and massive appreciation for the clear instructions.

1 Like
6

No worries, I’m glad it’s working for you now

7

It is working but interestingly it didn’t originally work with the app I am migrating over from Laravel Mix.

I have 20 haltone images in the app. Each was constructed from arrays of data that are used to render a lo-fi 128x128 grid of “pixels” (to save the hassle of loading an image and doing an expensive operation to create grayscale grids at runtime.

There are 20 of them, roughly 50kb each, and they were originally done as export default [50,30,40....90,10] .js files, (each array being 16,364 long). When these are included in my src, the build hangs in both dev and production. When they are not present, it builds fine. Does it do some kind of aggressive caching?

Whatever is happening meant bud was unusable for this project until I broke the image data out into a separate JSON file and loaded that. Then it all worked fine.

8

Please post some code, or a link to a repo, that shows how to reproduce this problem if you’re looking for further help.

Additionally, this is a new issue that’s unrelated to Tailwind/your original question, so please make a new topic, too.

1 Like