Roots Discourse

How to reinstall Tailwind?

I have installed tailwind with composer create-project roots/sage and it was working for the most part. However, the grid (https://tailwindcss.com/docs/grid-template-columns) was not working. I was trying to update the Tailwind by running the yarn add -D tailwindcss in the theme directory and it broke the build. Running yarn build gives a lot of Tailwind-related errors.

Could you please tell me how to fix it and make the build process work and have Tailwind work again, preferably with grid support?

Thanks!

So, it seems like downgrading the Tailwind version to the originally installed (^0.6.5) fixes the build.

i wonder if there is way to use the latest Tailwind version instead?

was it Sage 9 or 10, you tried ?

The problem is there is a great difference between Tailwind 0.6.5 and the lastest version. they have removed a lot of old hacks and tricks.

I got the newest version to work with Sage 9, but correcting the tailwind.config.js - file and so styles in the .scss-files

I tried 9, whatever the composer create-project roots/sage installs.
Unfortunately I am not knowledgeable enough to correct the config and scss files to make it work. Is there a guide?

Give me 15 min - I’ll make one for you :wink:

Thanks. I surely appreciate it!
I wonder if this still works: https://roots.io/guides/how-to-setup-tailwind-css-in-sage/

first - you set Tailwindcss in the package.json to the lastest version. and install.
then you find the tailwind.config.js ( resources/assets/styles&) and overwrite it with the default config file from Tailwind.

Then you find the main.scss file and rename on line 12 - @tailwind preflight to @tailwind base

Then you go though all the other scss files (global, buttons, comments, forms and header) and remove or rename:

  • text-primary
  • bg-primary
  • border-primary
  • list-reset
  • text-grey-darker
  • border-grey
  • bg-grey-dark
  • bg-grey-darker
  • text-grey-lightest
  • bg-grey-light

And then it should work for you :slight_smile:

2 Likes

Awesome, this works. Thanks a ton!

One thing to be removed is ‘bg-grey’.

Now it work and the grid is working!
The headings (like H1) stylins are gone, but maybe it is by design, I can surely deal with it.

Thank you very much for your help!

The instructions at https://roots.io/guides/how-to-setup-tailwind-css-in-sage/ also work

Thats because of the new reset stylesheet in tailwindcss :slight_smile: I think its because h1-h6 doesnt have to look different, its more for SEO than looks :wink:

This topic was automatically closed after 42 days. New replies are no longer allowed.