Narration / Transcript

TailwindCSS v4.0: Upgrading from v3 with some plugins

This is what the narrator says, not what the page shows: equations are read as sentences, code blocks are described, and citations are spoken as citations.

23 blocks · 540 spoken words · narrated Jul 26, 2026

  1. 0:00

    Introduction

  2. 0:02

    Recently, while building a personal blog started with Tailwind CSS v3.4, I was faced with the need to upgrade to the latest version of the utility-first library. Though this migration guide was helpful, I couldn't find resources to include plugins such as @tailwindcss/typography (needed for the prose -related rules) and @tailwindcss/forms (needed for form elements). Hence this article. It will be a short ride.

  3. 0:28

    Prerequisite

  4. 0:30

    It is assumed you have a basic familiarity with the library. Also, I will be using SvelteKit as a framework of choice here but you just need any project where you need to migrate tailwind CSS from v3 to v4.

  5. 0:45

    Implementation

  6. 0:47

    Step 1: Run the tailwind CSS upgrade tool

  7. 0:51

    To ease developers' stress migrating, the team at Tailwind CSS provided a nifty tool that helps to migrate between the versions effortlessly. In your project's root, just run: The shell code below is 1 line.

  8. 1:05

    You should accept the installation prompt and watch it do its magic! It will help correct some breaking changes in your code, fix postcss configuration (if you use it), correct the import statements in your main CSS file where tailwind was used, upgrade its version in package dot json, etc. In case it can't migrate some stuff, you will be informed.

  9. 1:28

    Step 2: Using plugins

  10. 1:30

    The step above was pretty easy and basic. As I mentioned, the migration guide included that. However, most projects use more than just the basic tailwind setup. For example, you need @tailwindcss/typography for this rule to work: The CSS code below is 3 lines.

  11. 1:49

    without it, you will be greeted with something like: The CSS code below is 1 line.

  12. 1:54

    In the same vein, without @tailwindcss/forms, you would find it hard to easily work with form elements, especially checkboxes.

  13. 2:03

    In version 3, adding plugins such as the above would be done in tailwind dot config dot ts: The TypeScript code below is 12 lines, from tailwind dot config dot ts.

  14. 2:16

    However, with v4, you can ditch that file entirely. Instead, use your main entry CSS file (where you import tailwindcss): The CSS code below is 4 lines, from app dot css.

  15. 2:29

    with that, tailwindcss will compile easily.

  16. 2:33

    Step 3: Enabling dark mode

  17. 2:36

    By default, v4 uses the awesome prefers color scheme media feature to intrinsically support dark mode. However, most of us are used to toggling light/dark themes based on classes. Hence, in v3, we achieved this using tailwind dot config dot ts: The TypeScript code below is 9 lines, from tailwind dot config dot ts.

  18. 2:59

    In v4, the file will also be ditched. The main entry CSS file comes to the rescue: The CSS code below is 5 lines, from app dot css.

  19. 3:10

    with that, your previous toggling feature comes back to life!

  20. 3:14

    That's it! If you have other tips, don't hesitate to share them.

  21. 3:18

    Outro

  22. 3:20

    Enjoyed this article? I'm a Software Engineer and Technical Writer actively seeking new opportunities, particularly in areas related to web security, finance, healthcare, and education. If you think my expertise aligns with your team's needs, let's chat! You can find me on LinkedIn and X. I am also an email away.

  23. 3:42

    If you found this article valuable, consider sharing it with your network to help spread the knowledge!