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

Reactjs – Tailwind doesn't apply styles on components in pages folder

NextJS project has been created already with tailwind support so I didn’t set up it by myself

When I add className on html element on component in pages/ folder it simply doesn’t work even thought Elements panel in DevTools shows that className is present

I tried to add a component in src/app/ directory with tailwind classes and it works fine

I saw somewhere in answers for the same problem that probably path pages/ is not present in tailwind.config.js but it is added in my config

here is code:

UPD:
layout.tsx:

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './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: [],
}

globals.css:

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

here is usage in pages/news/[category].tsx:

export default function ArticleListByCategory({ articles, category }: { articles: Article[], category: string }): JSX.Element {
    return (
        <>
            <h1>Showing news for catgory <i>{category}</i></h1>
            {
                articles.map((article: Article) => (
                    <div key={article.id}>
                                       ///////
                        <h2 className="text-red-500">
                            {article.id} {article.title}
                        </h2>
                        <p>{article.description}</p>
                        <hr />
                    </div>
                ))
            }
        </>
    )
}

and here is what I see on the site:
enter image description here

However, here is src/app/example route code:
src/app/example/page.tsx:

export default function Example(): JSX.Element {
    return (
        <>
            <h1 className="text-red-500">Hello</h1>
        </>
    )
}

and here is result for /example/

enter image description here

Tags:

2

Answers


  1. 0

    Make sure you are importing globals.css in your layout.tsx file. This will ensure that tailwind gets applied to every layout and page across your website.

    Keep in mind that stylesheets applied to your RootLayout will apply to every single nested layout. If you would like to use separate stylesheets for separate layouts, you can use a mixture of Tailwindcss Layers and CSS modules to achieve this;

    https://tailwindcss.com/docs/functions-and-directives

    Login or Signup to reply.
  2. 0

    To get this

    desired result

    Please read this section

    https://tailwindcss.com/docs/customizing-colors

    If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the theme.colors section of your configuration file:

    module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

    If you want to use their different variants then you can do something like that

    module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
      },
      // ...
    },
  },
}

    Now you can use it like that

    <h2 class="text-tahiti-500">Some Text</h2>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search