remix-tailwind
TypeScript icon, indicating that this package has built-in type declarations

0.3.0 • Public • Published

remix-tailwind

Use TailwindCSS with Remix without an extra build step!

Install

# npm
npm install remix-tailwind tailwindcss postcss

# pnpm
pnpm install remix-tailwind tailwindcss postcss

# yarn
yarn add remix-tailwind tailwindcss postcss

Usage

  1. Generate a tailwind config:

    npx tailwindcss init
  2. Create a file at app/routes/tailwindcss.tsx or app/routes/tailwindcss.js:

    import type { LoaderFunction } from "remix"
    import { serveTailwindCss } from "remix-tailwind"
    
    export const loader: LoaderFunction = () => serveTailwindCss()
  3. Add a link to this route in app/root.tsx:

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

And that's it! Get styling. 🖌

Custom CSS file

remix-tailwind uses a default CSS file, but you can provide a path to your own. The path can be absolute, or relative to the current working directory.

// app/routes/tailwindcss.tsx
import type { LoaderFunction } from "remix"
import { serveTailwindCss } from "remix-tailwind"

export const loader: LoaderFunction = () => serveTailwindCss("app/tailwind.css")
/* app/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  @apply bg-slate-900 text-slate-100;
}

How it works

  • Reads your CSS and config when requesting the route
  • Processes tailwind CSS via PostCSS and returns it as a response
  • Remix takes that CSS and applies it to the page (via a link tag, that ol' thing)

In production, the CSS is only built once, and cached on every following request. This is probably fine, but you could consider prebuilding the CSS yourself if you like.

Readme

Keywords

none

Package Sidebar

Install

npm i remix-tailwind

Weekly Downloads

25

Version

0.3.0

License

MIT

Unpacked Size

11 kB

Total Files

6

Last publish

Collaborators

  • itsmapleleaf