Tailwind CSS is basically a standard, start acting like it

I'm regularly spinning up new projects in different frameworks as part of my job. My goal is to prove the value of my thing – Sanity – and your thing – the framework you're using. The faster I can prove the value of my thing and your thing together, the better for me, the user, and the framework author.

Tailwind's Framework Guides are great for existing projects. And I've been told "it's just one more step" by folks online when I've complained about this before. One step is a lot.

Any friction on the way to proving the value of my-thing-plus-your-thing increases time-to-value. Worse, it introduces complexity that blurs and confuses what the user is trying to do.

Any user should be able to initialize a new project with any web framework, install just the specific integration I'm teaching in a guide, and then see the results without any extra work.

Any new project in any web framework can render HTML without any additional config, so why don't they all additionally bundle a zero-config way to add styling? HTML without CSS is gross, and adding a side quest to a guide for either creating a CSS file or implementing a CSS framework is annoying busy work that distracts from the goal.

If you're going to implement any method of doing CSS, why not use by far the most popular one? Tailwind requires no real additional setup, has a small footprint, doesn't require the user to know any unique framework-isms (it's literally just class names) and can be easily removed.

In simplest terms, this is what I want these guides to do:

But if the framework you're starting with can't install Tailwind CSS, here's how our guides look:

This extra step – even if it's just one step – has nothing to do with the goal of the guide I'm authoring or the end user trying to follow it.

Copy link to this section✅ Frameworks doing it right

I believe every web application framework:

• Should include an optional --tailwind flag to start an otherwise blank new project with Tailwind CSS preconfigured.
• Maintain this option and not rely on a third-party template which can become easily outdated.
• Make the tailwind.config.js available in the root with limited customisation, so it can be easily updated or removed.

With that in mind let's look at the popular frameworks.

(This is not an exhaustive list, and if I have made any mistakes I will gladly correct them.)

Copy link to this sectionNext.js

It seems the Next.js folks agree with me, --tailwind is not only an option, it's the default.

npx create-next-app@latest --tailwind

Copy link to this sectionRemix

Remix goes a step further, it's not an option, it's currently installed by default in a new project when using the default options. (I may have had something to do with this.)

npx create-remix@latest

Copy link to this sectionAstro

Astro maintains a bare-bones theme that includes Tailwind CSS.

npm create astro@latest -- --template with-tailwindcss

Copy link to this section🤏 Close, but could be better

Copy link to this sectionNuxt

The way modules can be added to Nuxt makes installing Tailwind simple, but requires a three-liner instead of one. Which adds the complexity of either having to know or determine the folder name ahead of time.

npx nuxi@latest init nuxt-app
cd nuxt-app
npx nuxi module add tailwindcss

Alternatively there is a well-maintained template Nuxt UI, which makes this a one-liner. And while I'm a fan of how it bundles the most popular Tailwind plugins by default – and has almost no boilerplate code – I don't love how it hides the Tailwind config file from the root.

npx nuxi@latest init -t ui

Copy link to this sectionSvelteKit

SvelteKit's init script includes options to bundle add-ons like eslint, Prettier, Playright and Vitest, but not CSS. Odd. The documentation then states:

Run npx svelte-add to setup many different complex integrations with a single command including:

CSS - Tailwind, Bootstrap, Bulma

Is CSS really more "complex" than a test runner? Also, it's been a minute since I saw anyone mention those last two options. Anyway ... once again we've got a three-liner.

npm create svelte@latest my-app
cd my-app
npx svelte-add@latest tailwindcss

Copy link to this sectionNo need to complain

You hate Tailwind CSS? Congratulations. I'm not advocating for Tailwind to be thrust on all users. It happens to be my favorite way of writing CSS, but it's also the most popular styling library with the smallest footprint and makes a great choice as a sensible default.