I tried following the Tailwind UI tutorial, but unfortunately, it doesn't seem to match up with my Next.js project.
Take a look at my tailwind.config.ts:
export const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require("@tailwindcss/forms")],
};
Here's an excerpt from my package.json file:
{
"name": "nextjs-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@headlessui/react": "^1.5.0",
"@heroicons/react": "^1.0.6",
"next": "12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"tailwindcss": "^3.0.23"
},
"devDependencies": {
"@types/node": "17.0.21",
"@types/react": "17.0.40",
"eslint": "8.11.0",
"eslint-config-next": "12.1.0",
"typescript": "4.6.2"
}
}
And here is a snippet of my custom _document.tsx file:
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
This is what the Signin component currently looks like:
https://i.sstatic.net/oFlAV.png
And this is how it's supposed to look: