Remix Tailwind Base Stack

A quick start for Remix apps with Tailwind CSS, all included.

Learn more about Remix Stacks.

npx create-remix@latest --template rphlmr/remix-tailwind-base-stack

What's in the stack

⚠️ Typescript only

Only the basics:

• Styling with Tailwind
• Raw unstyled components with HeadlessUI
• Icons with Heroicons
• Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts with Tailwind Merge
• Tailwind official plugins :
  • Typography
  • Forms
  • Aspect Ratio
  • Line Clamp
• Tailwind unofficial plugins :
  • Tailwind Scrollbar
• Tailwind Eslint
• Code formatting with Prettier
  • Tailwind Prettier
• Linting with ESLint
  • Tailwind Eslint
• Static Types with TypeScript

Not a fan of bits of the stack? Fork it, change it, and use npx create-remix --template your/repo! Make it your own.

Development

From your terminal:

npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of remix build

• build/
• public/build/