Once you have installed Tailwind CSS, you need to configure your template paths in your tailwind.config.ts file.
import type { Config } from 'tailwindcss'
export default {
content: ["./app/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
} satisfies Config
import type { Config } from 'tailwindcss'
export default {
content: ["./app/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
} satisfies Config
#Add Tailwind CSS Directives to CSS
Next, you need to add the Tailwind CSS directives to your CSS file. Create a ./app/tailwind.css file and add the @tailwind directives for each of Tailwind's layers.
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
#Import CSS File
Next, you need to import the newly-created tailwind.css file in your ./app/root.tsx file.
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/node";
import stylesheet from "~/tailwind.css?url";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
];
export function Layout({ children }: { children: React.ReactNode }) {