Adding configuration information for Tailwind deployment on Remix/Vite

[xavierBizoux]

Remix will use Vite as the underlying build system. At this point the installation documentation only covers the "traditional" installation approach for Tailwind under Remix environment. With upcoming versions, the documentation to install Tailwind should reflect that the installation is a mix of installation on Remix and installation on Vite. Based on my understanding (and tests), the installation under Vite/Remix requires to install the following:

1. npm install -D tailwindcss postcss autoprefixer

2. npx tailwindcss init --ts

3. Update tailwind.config.ts `import type { Config } from 'tailwindcss'

export default { content: ['./app/**/*.{js,jsx,ts,tsx}'], theme: { extend: {}, }, plugins: [], } satisfies Config`

4. Create a file named ./app/index.css with the following content: @tailwind base; @tailwind components; @tailwind utilities;

5. Create a file named ./postcss.config.mjs with the following content: export default { plugins: { tailwindcss: {}, }, }

6. Add the following lines at the top of root.tsx: `import type { LinksFunction } from '@remix-run/node'

import stylesheet from "~/index.css?url"

export const links: LinksFunction = () => [{rel:"stylesheet", href: stylesheet}]` Note that it is important to add "?url" at the end of the stylesheet file import.

When all of this is done, it should be possible to use Tailwind inside a Vite/Remix application.