How to configure Tailwind CSS for Remix when using SPA mode (Vite with ssr: false)?

[mattmazzola]

I am trying to understand how to configure Tailwind CSS for Remix when using SPA mode template.

I created normal SPA Remix using the new template:
npx create-remix@latest --template remix-run/remix/templates/spa

I have configured the 'baseandbasenameofvite.config.ts` for GitHub deployment

export default defineConfig({
  base: "/remix-spa-github/",
  plugins: [
    remix({
      basename: "/remix-spa-github/",

Then I attempted to go through the standard Tailwind CSS however the default configuration using @tailwind directives in CSS seem to fail.

Error

ErrorResponseImpl {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/remix-spa-github/@tailwind%20base;@tailwind%20components;@tailwind%20utilities;"',
  error: Error: No route matches URL "/remix-spa-github/@tailwind%20base;@tailwind%20components;@tailwind%20utilities;"
      at getInternalRouterError (D:\repos\remix-spa-github\node_modules\@remix-run\server-runtime\node_modules\@remix-run\router\dist\router.cjs.js:4529:59)
      at Object.query (D:\repos\remix-spa-github\node_modules\@remix-run\server-runtime\node_modules\@remix-run\router\dist\router.cjs.js:3359:19)        
      at handleDocumentRequestRR (D:\repos\remix-spa-github\node_modules\@remix-run\server-runtime\dist\server.js:184:35)
      at requestHandler (D:\repos\remix-spa-github\node_modules\@remix-run\server-runtime\dist\server.js:108:24)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async nodeHandler (D:\repos\remix-spa-github\node_modules\@remix-run\dev\dist\vite\plugin.js:837:27)
      at async D:\repos\remix-spa-github\node_modules\@remix-run\dev\dist\vite\plugin.js:840:15

I looked more at the documentation and saw this note:

If you're using Remix Vite, Tailwind can be integrated using Vite's built-in PostCSS support

The docs for PostCSS are very minimal, but from my understanding I should create postcss.config.ts that specifies to use tailwind like

export default {
    plugins: {
        tailwindcss: {},
    }
}

However, then this failed with

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: D:/repos/remix-spa-github): [Error] Must use import to load ES Module: D:\repos\remix-spa-github\postcss.config.ts
require() of ES modules is not supported.
require() of D:\repos\remix-spa-github\postcss.config.ts from D:\repos\remix-spa-github\node_modules\vite\dist\node\chunks\dep-jvB8WLp9.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from D:\repos\remix-spa-github\package.json.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\repos\remix-spa-github\postcss.config.ts
require() of ES modules is not supported.
require() of D:\repos\remix-spa-github\postcss.config.ts from D:\repos\remix-spa-github\node_modules\vite\dist\node\chunks\dep-jvB8WLp9.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from D:\repos\remix-spa-github\package.json.

    at createErrRequireEsm (D:\repos\remix-spa-github\node_modules\ts-node\dist-raw\node-internal-errors.js:46:15)
    at assertScriptCanLoadAsCJSImpl (D:\repos\remix-spa-github\node_modules\ts-node\dist-raw\node-internal-modules-cjs-loader.js:584:11)
    at Object.require.extensions.<computed> [as .ts] (D:\repos\remix-spa-github\node_modules\ts-node\src\index.ts:1610:5)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Function.Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at file:///D:/repos/remix-spa-github/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:29147:16
    at Object.search (file:///D:/repos/remix-spa-github/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:21351:48)] {
  code: 'ERR_REQUIRE_ESM'

At this point I realized I didn't know enough to continue and decided it was better to ask for help 😊

I thought either there is something simple I can configure such as base and basename to make the @tailwind directive work OR perhaps this is more complicated and this is the reason that there are not dedicated documentation for yet

If anyone has done this successfully, a link to repo or docs would be appreciated.

[SteveSuv]

follow this guide:
https://tailwindcss.com/docs/guides/vite

[mattmazzola]

The correct content of postcss.config.js should have been

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Strangely an error still shows in the terminal; however, Remix + Vite + Tailwind seem to be working now.

ErrorResponseImpl {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/*!%20tailwindcss%20v3.4.3%20%7C%20MIT%20License%20%7C%20https://tailwindcss.com*//*1.%20Prevent%20padding%20and%20border%20from%20affecting%20element%20width.%20(https://github.com/mozdevs/cssremedy/issues/4)2.%20Allow%20adding%20a%20border%20to%20an%20element%20by%20just%20adding%20a%20border-width.%20(https://github.com/tailwindcss/tailwindcss/pull/116)*/*,::before,::after%20%7B%20%20box-sizing:%20border-box;%20/*%201%20*/%20%20border-width:%200;%20/*%202%20*/%20%20border-style:%20solid;%20/*%202%20*/%20%20border-color:%20"',
  ...

[WahidinAji]

same issue ;). the page is no issue, but I got the same error in the log

[khaled301]

The URL param (?url) at the end of the tailwind.css stylesheet import solved my issue.

In root.tsx file,

import stylesheet from "./tailwind.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
];