Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsMapleLeaf/remix-tailwind
Use TailwindCSS with Remix without an extra build step!
https://github.com/itsMapleLeaf/remix-tailwind
Last synced: about 2 months ago
JSON representation
Use TailwindCSS with Remix without an extra build step!
- Host: GitHub
- URL: https://github.com/itsMapleLeaf/remix-tailwind
- Owner: itsMapleLeaf
- License: mit
- Archived: true
- Created: 2021-11-23T18:41:41.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-15T20:24:37.000Z (6 months ago)
- Last Synced: 2024-05-09T08:34:16.535Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 287 KB
- Stars: 82
- Watchers: 1
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-remix - remix-tailwind - Use TailwindCSS with Remix without an extra build step. (Utility)
- awesome-remix - remix-tailwind - Use TailwindCSS with Remix without an extra build step. (Utility)
README
# Deprecated!
Remix has supported TailwindCSS built-in for a while now. Don't use this.
- Remix Vite: https://remix.run/docs/en/main/future/vite#enable-tailwind-via-postcss
- Classic compiler: https://remix.run/docs/en/main/styling/tailwind#tailwind
# remix-tailwind
Use [TailwindCSS](https://tailwindcss.com) with [Remix](https://remix.run) without an extra build step!
## Install
```sh
# 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:
```sh
npx tailwindcss init
```
1. Create a file at `app/routes/tailwindcss.tsx` or `app/routes/tailwindcss.js`:
```ts
import type { LoaderFunction } from "remix"
import { serveTailwindCss } from "remix-tailwind"
export const loader: LoaderFunction = () => serveTailwindCss()
```
1. Add a link to this route in `app/root.tsx`:
```js
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.
```ts
// app/routes/tailwindcss.tsx
import type { LoaderFunction } from "remix"
import { serveTailwindCss } from "remix-tailwind"
export const loader: LoaderFunction = () => serveTailwindCss("app/tailwind.css")
```
```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.