Question 245748 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – tailwindcss not working properly for some strange reason

For some reason my tailwindcss isn’t working correctly. Did I forget something?

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

layout.js (main/entry point)

import 'app/global.css'

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}
 
export default function RootLayout({ children }) {
 return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

package.json

{
  "name": "smashorpass",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "^10.4.15",
    "dayjs": "^1.11.9",
    "embla-carousel-react": "8.0.0-rc12",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "next": "v13.3.1-canary.03",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "^3.3.3"
  }
}

component.jsx

'use client'
import { useRouter } from 'next/navigation';

export default function SaveButton() {
    return (<button class="rounded-full">Save Changes</button>)
}

Tried to apply the button. But nothing happenes. Just a normal button. If I left the @tailwind utilities; tag alone, the button get rounded, but not css there. Any solution?

enter image description here

Tags:

2

Answers


  1. 0

    From your configuration, I see that you’re using Tailwind CSS v3.x.x.

    As of Tailwind CSS v2.2.0, the JIT (Just-In-Time) mode is included natively in Tailwind CSS. JIT mode allows Tailwind to generate styles on-demand as you reference them, rather than generating everything in advance at initial build time. This solves many issues and has several benefits, and in v3.x.x, JIT is the default mode.

    However, the content configuration you’ve provided seems to be for JIT mode, but in the wrong location.

    In Tailwind CSS v3.x.x, the content option should be placed inside the tailwind.config.js like this:

    module.exports = {
  mode: 'jit',
  purge: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

    What this does is specify the files that Tailwind should scan for class names.

    Also, you’re using class instead of className in your React component. In React, className is used instead of class for DOM elements.

    So, instead of this:

    export default function SaveButton() {
    return (<button class="rounded-full">Save Changes</button>)
}

    You should use this:

    export default function SaveButton() {
    return (<button className="rounded-full">Save Changes</button>)
}

    After making these changes, you should restart your development server to see if the problem is fixed. If the problem persists, you could try deleting your node_modules folder and package-lock.json file (or yarn.lock if you’re using Yarn), then run npm install (or yarn if you’re using Yarn) to reinstall your dependencies. This could help if the problem is caused by a dependency issue:)

    Login or Signup to reply.
  2. 0

    Include global.css file inside rootlayout
    import ‘your global CSs path’

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search