Roots Discourse

How to reinstall Tailwind?

sage
#1

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!

#2

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?

#3

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

#4

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?

#5

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

#6

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

#7

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:

1 Like
#8

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!

#9

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

#10

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:

#11

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