[SOLVED] Upgrading to Tailwind 3 - all the gotchas

[adrelliott]

Hi guys,

Love Jigsaw, but upgrading to Tailwind 3 took me days of head-scratching and tears. I read all the discussions, Google ALLTHETHINGS and managed to find a way to upgrade.

EDIT: I think I've cracked it. I'll just list the commits here. So if you're looking to upgrade to TailwindCSS 3, follow these steps:

1. Upgrade Tailwind etc with this command. See my commit here
2. I then had to run npm audit fix. No idea what it did, but it stopped the npm error messages from showing.
3. Install the official Tailwind plugins . I just ran npm npm install -D followed by each of the highlighted plugins (typography, forms, aspect-ratio & line-clamp). Did them one by one, but I'm sure you'll know how to do them together.
4. Updated tailwind.config.js to use the new Tailwind format. See the changes here
5. Changed source/_assets/sass/_base.scss like this. Now, it looks like a lot of changes, but mainly it was wrapping the entire contents in @layer base { ALLTHEEXISTINGCSS }
6. Then using 'find and replace' found every instance of @apply . and changed to @apply (no period)
7. For example: @apply .my-4; was changed to @apply my-4;
8. repeated the above steps for source/_assets/sass/_navigation.scss (commit is here) and source/_assets/sass/_search.scss (see commit).
9. Then panicked, as npm run watch went crazy and started looping endlessly...
10. ....but found a comment somewhere in here that suggested editing tailwind.config.js like this.

Now, I'll be honest here. I have no idea what a lot of the above actually does!

So:

• Don't be replying asking me questions - I have no idea!
• Don't blame me if you do all this and your app develops some kind of AI and starts trolling you with stuff like this.
• Do go through the upgrade guide in the Tailwind docs - it's really good and helps you get about 90% of the way there.

---

ORIGINAL QUESTION, NOW OBSOLETE:

~Now, here's where I need some advice - to help anyone else in this situation, I did a commit after each file change and labelled it according to what I changed.

But this is part of a bigger project that I'd like to work on. Is there a way to share my repo (on Github), and all the commits, but only up to a certain point?

i.e. https://github.com/adrelliott/oblongloves/commits/main right now shows the changes to get Tailwind 3 installed.

But tomorrow I might want to commit and push changes that would be irrelevant to anyone looking purely to upgrade to TW3.

In short - is there a way to publish a snapshot of the repo today, including the commits, that won't change if I commit and push more changes..?

Git makes my head hurt - I'm sure there's a way to do this, but I don't even know what question to google!~

[bingalls]

@adrelliott All of your personal github links are dead, in particular to github commits. Consider Gists, if you must. That said, the rest of your guide still works for a fresh install of the Jigsaw Blog template.
Hopefully, TightenCo will start accepting PRs again. The only part that was unclear, from Tailwind's upgrade guide, is that you should remove purge to make content a top-level object in tailwind.config.js . In other words:

module.exports = {
    // purge: {
        content: [

Keep it static! 👍