How to enable tailwind in a tanstack start project
It may not be immediately obvious how to get Tailwind working in a Tanstack Start project when you're first getting started with Tanstack Start. However, the process is very simple since Tanstack Start is built on top of Vite and most of the configuration is the same as with any Vite project.
First install tailwindcss and the tailwindcss vite plugin:
npm install tailwindcss @tailwindcss/viteThen, if you followed the "build from scratch" instructions, you wont have a tailwind config file but instead an app config file called app.config.ts.
In that file, you will see a plugins array. Add the tailwindcss plugin to that array:
tailwindcss(),
Also add the plugin dependency to the top of the file that you installed earlier:
import tailwindcss from '@tailwindcss/vite'
The next step is to create the tailwind css file. You can call this file whatever you want but I called it index.css, so please create a file called index.css (or whatever you chose) in the app directory.
In that file, you only need to add the following:
@import "tailwindcss";Then you need to open the root route. Mine is called __root.tsx and is in the app/routes directory. Find your root route and import your newly created css file:
import '../index.css'That's it. You should now have tailwind working in your Tanstack Start project and you can use it in all your routes. If you want to simply have it in one specific route, you can just import it in that route instead of the root route.