let’s add the Tailwind dependencies.
npm install -D tailwindcss postcss autoprefixer
And the init command can do the rest:
npx tailwindcss init -p
Now let’s edit the generated tailwind.config.js to add the content configuration for our files.
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{jsx,tsx}'], // tell tailwind where to look
theme: {
extend: {},
},
plugins: [],
}
Lastly, we need to import Tailwind directives into a global stylesheet for our frontend, let’s create a globals.css file next to our layout in (app).
@tailwind base; @tailwind components; @tailwind utilities;
And we need to make sure this is imported into our layout.tsx component.
import { ReactNode } from 'react';
type LayoutProps = {
children: ReactNode;
};
import './globals.css';
const Layout = ({ children }: LayoutProps) => {
return (
<html>
<body>
{children}
</body>
</html>
);
};
export default Layout;