Installation
Install Tailwind CSS with Remix
Setting up Tailwind CSS in a Remix project.
Create your project
Start by creating a new Remix project if you don’t have one set up already. The most common approach is to use Create Remix.
Terminalnpx create-remix@latest my-projectcd my-project
Install Tailwind CSS
Install
tailwindcss
, its peer dependencies, andconcurrently
via npm, and then run the init command to generate bothtailwind.config.js
andpostcss.config.js
.Terminalnpm install -D tailwindcss postcss autoprefixer concurrentlynpx tailwindcss init -p
Configure your template paths
Add the paths to all of your template files in your
tailwind.config.js
file.tailwind.config.jsmodule.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
Update your package.json scripts
Update the scripts in your
package.json
file to build both your development and production CSS.package.json{ "scripts": { "build": "npm run build:css && remix build", "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css", "dev": "concurrently \"npm run dev:css\" \"remix dev\"", "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css", } }
Add the Tailwind directives to your CSS
Create a
./styles/app.css
file and add the@tailwind
directives for each of Tailwind’s layers.app.css@tailwind base; @tailwind components; @tailwind utilities;
Import the CSS file
Import the compiled
./app/styles/app.css
file in your./app/root.jsx
file.root.jsximport styles from "./styles/app.css" export function links() { return [{ rel: "stylesheet", href: styles }] }
Start your build process
Run your build process with
npm run dev
.Terminalnpm run dev
Start using Tailwind in your project
Start using Tailwind’s utility classes to style your content.
index.jsxexport default function Index() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> ) }