Question 38044 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Why are my tailwind css classes not working? – Ubuntu

Hi i am new to tailwind css, i am trying to do a portfolio website with next js tailwind css but my classes are not working and i do not know why.

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

This are my globals.css:

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
@font-face {
  font-family: "burtons";
  src: url("../public/Burtons.otf");
}

And this is my index.tsx:

import Head from 'next/head'
import { Inter } from '@next/font/google'
import { BsFillMoonStarsFill } from 'react-icons/bs';

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

export default function Home() {
  return (
    <>
      <Head>
        <title>Mateo Ghidini Dev</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className='bg-white px-10'>
        <section className='min-h-screen'>
          <nav className='py-10 mb-12 flex justify-between'>
            <h1 className='text-xl'>Developed by Mateo Ghidini</h1>
            <ul className='flex items-center'>
              <li>
                <BsFillMoonStarsFill/>
              </li>
              <li><a href="#">Resume</a></li>
            </ul>
          </nav>
        </section>
      </main>
    </>
  )
}

Only my html tags are working. Any reason why?

Tags:

2

Answers


  1. 0

    I guess your tailwind classes don’t get shipped. Please have a look at the Tailwind docs for that, you can either use the tailwind CLI in a manual approach or use PostCSS if you’re not using a framework like next.js:
    https://tailwindcss.com/docs/installation

    Login or Signup to reply.
  2. 0

    If the classes are working in your HTML tags then the problem must be the content array in your tailwind.config.js. You are adding tailwind classes in a file whose path is not included in the content array so Tailwind is likely purging those classes and not applying them.
    Modify it like this and try:

    module.exports = {
  content: ["./src/**/*.{html,js,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

    Also make sure that your index file or any other file where you are applying the classes are inside src folder and if you want to target other folders like pages in case of next.js then mention their paths too in the content array.

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

Back To Top
Search