Introducing Remix - Styled with TailwindCSS

Read the Remix App section.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.

Read the TailwindCSS Setup with Remix section.TailwindCSS Setup with Remix#

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

Copy
1npm install -D tailwindcss postcss autoprefixer concurrently
2

or if you prefer yarn

Copy
1yarn add -D tailwindcss postcss autoprefixer concurrently
2

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

Copy
1npx tailwindcss init -p
2

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

Copy
1module.exports = {
2  content: ["./app/**/*.{js,ts,jsx,tsx}"],
3  theme: {
4    extend: {},
5  },
6  plugins: [],
7};
8

now we need to update your package.json scripts

Copy
1{
2  "scripts": {
3    "build": "npm run build:css && remix build",
4    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
5    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
6    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css"
7  }
8}
9

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.

Copy
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4

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

Copy
1import styles from "./styles/app.css";
2
3export function links() {
4  return [{ rel: "stylesheet", href: styles }];
5}
6

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

Copy
1npm run dev
2

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

Copy
1export default function home() {
2  return <h1 className='text-3xl font-bold '>Remix + Tailwindcss</h1>;
3}
4

Well done! 👏 Thanks for reading! Say Hallo! Twitter