[Blog post] Building the Tailwind Blog with Next.js

[adamwathan]

We just launched a brand new Tailwind blog today, and I decided to write up some of the details about how we did it in a blog post:

Read "Building the Tailwind Blog with Next.js"

Let us know what you think! 🙌

[petercossey]

@adamwathan great write-up! I really enjoy reading posts like this that get into the weeds on how to solve features like author snippets and teaser previews etc. Did you go through a Gatsby vs Next consideration for the blog or was it always going to be Next?

[tomillo]

Great job! Did you forget RSS?

[jescalan]

Just saying hello - I know we linked up briefly but never really had a chance to connect. We are still pursuing a move over to next-mdx-remote over at hashicorp and its going quite well. Happy to discuss if you ever feel the need to make that move. We have found that as you add up more content, the webpack memory profile starts getting very unwieldy.

[brandonpittman]

@jescalan I started using the enhanced plugin, but after seeing remote, it changed my mind!

[zburk]

@adamwathan Vue dev tools detects that the current Tailwind CSS site is built with Vue, what was the reasoning for going with React and Next.js for the blog rather than Nuxt? What's the reasoning for wanting to rebuild the current Tailwind CSS site in React?

[adamwathan]

The Tailwind site is actually mostly just a static Jigsaw site:

https://github.com/tailwindcss/docs

We use a bit of Vue for things here and there but it's not a true Vue app/site like something you'd build with vue-cli for example.

We want to rebuild the site with something like Next because the current site is such a hodge podge mess of tech. It's Jigsaw for the static site generation, a bunch of jQuery garbage for the client-side navigation (to preserve sidebar scroll position), with Vue.js inside individual pages for little interactions.

I want to author all of the docs content in MDX because it allows us to write in Markdown but still include interactive components, and out of the tools I've tried, Next.js does the best job at it. There are other solutions too like Gatsby, or other doc-site specific tools, but I really like the super minimalism of Next and that it doesn't scaffold 50 folders with 300 files when you create a new site. It's a very simple tool with a clear mental model that's easy to understand and build on top of.

[brandonpittman]

@adamwathan When you first started talking about Next.js a while back, I couldn't understand how the guy who made an advanced Vue course would be jumping ship to React and Next.js. BUT, after playing with Next and seeing its optimizations for Zeit Now, I actually made the effort to get as familiar with React as I was with Vue. In the end, I'm glad to be in the React ecosystem and haven't touched Vue in months. I'm glad you showed your interest in Next because it led me to it as well.

[zburk]

@brandonpittman I've played with React and Vue and am torn between both. What do you think React does better than Vue? Vue seems to handle a lot of basic optimizations and has the benefit of basic packages being handled officially developed by the core team whereas React passes a lot of assumptions over to the user, which requires a more conscious effort to achieve similar functionality to a Vue app.

[brandonpittman]

@zburk React requires you to know what’s going on. Vue does a lot of magic that’s helpful, but if you’re the type of person who likes being in total control, React could be a better fit. They essentially do the same thing, React just approaches it in a more functional programming sort of way.

I also jumped to React because in a lot of ways Vue follows React’s lead and I’d prefer to be on the bleeding edge of the frontend design space.

[atilacamurca]

The challenges you describe in the blog post are so much simpler to solve in gridsome. Do you consider using gridsome? Did you make any kind of pros and cons list with other frameworks? What were they?

[adamwathan]

Explained my thought process a bit here:

#1987 (reply in thread)

[mattalco]

This is really neat stuff.

I had one question regarding the theme. Using the inspector, I noticed the palette is different from the palette listed on the Tailwind site. After a little digging, I see that there's work being done on a new theme here. What I can't figure out is how this new theme is getting enabled in this blog repo. I thought it might have something to do with the experimental flag but removing that didn't make a difference.

Maybe my eyes are tired this evening and I'm missing something obvious but I would love to learn more about what's going on here.

[adamwathan]

Hey! It's coming from the @tailwindcss/ui plugin being used at the bottom of the config file 👍🏻

https://github.com/tailwindlabs/blog.tailwindcss.com/blob/master/tailwind.config.js#L93

[anderson585]

The blog is fantastic and quite educational. I absolutely love using Tailwind CSS for all my frontend development needs! It's incredibly intuitive and easy to use, with a wide variety of classes that make styling a breeze. The flexibility of being able to tweak the design by changing a few class names is just amazing. With Tailwind, I can focus on the functionality and logic of my app, and not worry about the styling.

One of my favorite features of Tailwind is the ability to create custom themes. This means that I can define my own color palette, font sizes, and other design elements, and then easily apply them throughout my app. It's a huge time-saver, and ensures consistency across my entire project.

Overall, I highly recommend Tailwind CSS to anyone looking for a powerful and easy-to-use CSS framework. It's perfect for both beginners and experienced developers, and can save you a ton of time and headaches in the long run. I've written a post about tailwind box sizing, you may check and suggest me the steps if I've missed some.