Remix - Styled with TailwindCSS 3.0 🚨

Remix App 👋

I'm going to be using the default create-remix@latest command which sets up our project and gives us a demo site.

TailwindCSS Setup with Remix

Open your terminal and let's install tailwindcss, its peer dependencies, and concurrently via npm or yarn

npm install -D tailwindcss postcss autoprefixer concurrently
or if you prefer yarn
yarn add -D tailwindcss postcss autoprefixer concurrently

and then run the init command to generate both tailwind.config.js and postcss.config.js.

npx tailwindcss init -p

Let's update our tailwind.config.js file, Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

now we need to update your package.json scripts

{
  "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",
  }
}

Tailwind styles

We need to Add the Tailwind directives to your CSS.
Create a ./styles/app.css file and add the @tailwind directives for each of Tailwind’s layers.

@tailwind base;
@tailwind components;
@tailwind utilities;

now we need Add a reference of the generated CSS files using links in ./app/root.jsx file.

import styles from "./styles/app.css"

export function links() {
  return [{ rel: "stylesheet", href: styles }]
}

TailwindCSS is all setup in our Remix app.
Now when we run npm run dev it will generate a tailwind.css file in the root of our /app/ folder

npm run dev

Start using Tailwind in your project 🥳
Start using Tailwind’s utility classes to style your content.

export default function home() {
  return (
    <h1 className="text-3xl font-bold ">
      Remix + Tailwindcss 
    </h1>
  )
}

Well done! 👏
Read original post Click

Thanks for reading! Say Hallo! Twitter