Something seems off with my tailwind setup - it never seems to work on the first try. This screenshot clearly shows that the html tag is changing
I've made changes to my global.css configuration like this:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Following advice from stackoverlow, I have also added content to the tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
**content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],**
mode: "jit",
theme: {
extend: {
fontFamily: {
inter: ["Inter", "sans-serif"],
},
// more configurations here...
},
},
plugins: [],
};
I tried running the command npx tailwind -i tailwind.css -o ./layouts/styles.css --watch but encountered path errors. Switching it to npx tailwindcss -i build src/app/global.css -o public/styles.css still didn't solve the issue:
[Error: EISDIR: illegal operation on a directory, read] {
errno: -4068,
code: 'EISDIR',
syscall: 'read'
}
Even trying with pnpm commands instead of npx hasn't fixed it. Lastly, here's a snippet of my page.tsx code:
'use client'
import React from 'react';
export default function Home () {
return (
<div className="text-center mt-8">
<h2 className='text-2xl font-semibold'>Hello brow</h2>
</div>
);
}
I'm hopeful that the tailwind css will finally work as intended and reflect its classes in the HTML tags upon inspection.