Next.js Discord

Discord Forum

Simple issue. Make tailwind work

Answered
Spectacled bear posted this in #help-forum
Open in Discord
Avatar
Spectacled bearOP
Tailwind classes not getting applied.
tailwind.config.css
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/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))",
      },
    },
    screens: {
       sm: "640px",
       md: "768px",
       lg: "1024px",
       xl: "1280px",
       "2xl": "1536px",
    }
  },
  plugins: [
    require('@tailwindcss/container-queries'),

  ],
};
export default config;
Image
Answered by Spectacled bear
ok all ok now
its reading from tailwind.config.js not .ts
Image
View full answer

18 Replies

Avatar
Wumpus Nimpus
It work on mine:
Image
Avatar
Spectacled bearOP
so its config issue
hwo do i test
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",

what it mean
what is **
Avatar
Wumpus Nimpus
Actually, I don't know as well
Avatar
Spectacled bearOP
file is in componnets dir
Image
Avatar
Wumpus Nimpus
Do you mind searching it up?
'cuz i found some
Avatar
Spectacled bearOP
Use * to match anything except slashes and hidden files
Use ** to match zero or more directories
Use comma separate values between {} to match against a list of options
Avatar
Wumpus Nimpus
1. Base Directory:
./src/app
specifies the starting directory for the file search. It indicates that the search will begin within the app folder, located inside the src directory, relative to the current working directory.

2. Wildcard Pattern:
**/*
is a wildcard pattern that matches zero or more directories and subdirectories at any depth within the app folder. It expands the search to include files within any nested folder structure.

3. File Extensions:
.{js,ts,jsx,tsx,mdx}
targets specific file extensions, indicating that the search will only include files ending with one of these extensions:
.js: JavaScript files
.ts: TypeScript files
.jsx: JavaScript XML (React component files)
.tsx: TypeScript XML (React component files)
.mdx: Markdown files with JSX support
In essence, this code pattern instructs a tool or process to search for and include files with the specified extensions within the app folder and any of its subdirectories.

Specific uses for this pattern might include:

Linting tools: To check code quality for all relevant files within the app directory.
Build tools: To compile or bundle JavaScript and related files during project builds.
Testing frameworks: To automatically discover and run tests within the specified directory structure.
Regarding the symbol:

It's a wildcard character commonly used in file paths to represent any number of directories or subdirectories.
It allows for flexibility in matching files across multiple levels of nested folders**.
Avatar
Spectacled bearOP
-- home page itself not working
export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}
Avatar
Spectacled bearOP
does nextjs uses tailwind.config.js or tainwindconfig.ts?
Avatar
Spectacled bearOP
Image
Avatar
Spectacled bearOP
ok all ok now
its reading from tailwind.config.js not .ts
Image
Answer