refactor: migrate to tailwind v4

[dandedotdev]

Thank you for developing the template. I really appreciate it.

Recently, I spent some time migrating my website to Tailwind v4 so I think maybe I can try contributing to the template.

I put these styles at the utilities layer because the prose provided by @tailwind/typography is also at this layer so that would be easier.

Thank you for your time and attention.

[vercel]

@dandedotdev is attempting to deploy a commit to the timlrx's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwind-nextjs-starter-blog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 23, 2025 7:53am

[timlrx]

Thanks for the PR. Seems like the changes might have affected the code block styles.

New:

Previous:

[dandedotdev]

I'd like to apologize for my carelessness. Thank you for checking the actual applied styles for me.

In 03a8ec5, I revised the selector for code:

& :where(code):not(.code-highlight)

I think it might be better than:

& :where(code):not(pre code)

From the perspective of specificity

However, if the template migrates to another code-highlighting tool in the future, this might not work. (The classname is added by the generator of rehype-prism-plus.)

I also took the screenshots:

Light Theme	Dark Theme

Thank you again for your kindness and attention. I'll spend more time making the output CSS of both settings the same.

[dandedotdev]

After scanning the output file of Tailwind v4, I found some use of pre code. Hence, I think it's okay.

I also corrected a mistake I made, in the content in the original tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        DEFAULT: {
          // ...
        invert: { // HERE
         // ...
        },
      }),
    },
  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
}

...is for .prose-invert, so I corrected it.

There are still a few differences between the Tailwind output of my PR and that of the main branch. Sadly, for now, there is no way to get a similar output of @tailwindcss/typography by Tailwind v4. At least, there are no style conflicts.