Next.js Discord

Discord Forum

TailwindCSS not working

Unanswered
Xemu posted this in #help-forum
Open in Discord
XemuOP
My TailwindCSS classes are not working. 

import styles from './Hero.module.css'

export function HeroSection() {
    return (
        <main>
            <section className={styles.hero}>
                <section className={styles.heroText}>
                    <p className='text-lg'>The #1 Platform for Photographers</p>
                    <p className='text-xl'>Share your work with the world! ⭐</p>
                    <p className='text-lg'>Get started today.</p>
                </section>
            </section>
        </main>
    )
}


Tailwind config:
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config

3 Replies

XemuOP
The layout file:
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

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

export const metadata: 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>
  )
}
My module css:
.image {
    margin-right: 30px;
}

.nav {
    display: flex;
    background-color: #dfdfdf;
    color: #fff;
    height: 60px;
    justify-content: safe;
    align-items: center;
}

.links {
    list-style: none;
    display: flex;
    margin-right: 1rem;

    color: black;
}

.links li {
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0.25rem;
}
not-milo.tsx
Why are you using css modules and Tailwind in the same project? Stick to Tailwind and make sure that the content entry lists all the paths where you are using your styles.