Next.js Discord

2023-09-27T10:25:10.000Z

i have tailwindcss.config.jsï¼Œpostcss.config.jsï¼Œbut it didnt works

Answered by @ts-ignore

@lun ãƒ„ restart the dev server

View full answer

23 Replies

2023-09-27T10:25:23.000Z

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

../pages/index.tsx

import type { NextPage } from 'next'
import Head from 'next/head'

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>VALLIANTY</title>
      </Head>

      <h1 className='p-10 text-red-500'>test</h1>
    </div>
  )
}

export default Home

but u just dont know why h1 element didnt change color and font-size

@lun ãƒ„ tailwind.config.js js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}" ], theme: { extend: {}, }, plugins: [], }; postcss.config.js js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } next.config.js js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, swcMinify: true, } module.exports = nextConfig ../pages/index.tsx ts import type { NextPage } from 'next' import Head from 'next/head' const Home: NextPage = () => { return ( <div> <Head> <title>VALLIANTY</title> </Head> <h1 className='p-10 text-red-500'>test</h1> </div> ) } export default Home but u just dont know why h1 element didnt change color and font-size

2023-09-27T10:25:44.000Z

iirc postcss.config.css should be postcss.config.js

2023-09-27T10:26:29.000Z

tailwind by default resets styles, so you have to specify the size manually

dumbboy

2023-09-27T10:26:30.000Z

he probably had typo IG

@ts-ignore

2023-09-27T10:26:50.000Z

@lun ãƒ„ restart the dev server

Answer

@ts-ignore

2023-09-27T10:26:54.000Z

delete .next

2023-09-27T10:27:37.000Z

Nah wait the author to describe more about his issue, he didn't said tailwind css not working, but instead

h1 element didnt change color and font-size

@fuma Nah wait the author to describe more about his issue, he didn't said tailwind css not working, but instead > h1 element didnt change color and font-size

2023-09-27T10:28:17.000Z

~~but surly it can't work if the postcss file is not existent...?~~

2023-09-27T10:28:47.000Z

yeah~

@@ts-ignore <@1038029376924688394> restart the dev server

2023-09-27T10:28:49.000Z

Tailwind CSS does a [Preflight](https://tailwindcss.com/docs/preflight), it resets the default styles of heading elements. You have to do:

<h1 className="text-xl">Hello World</h1>

So that you can get the same look cross browsers/platforms

@@ts-ignore <@1038029376924688394> restart the dev server

2023-09-27T10:28:51.000Z

ok~

dumbboy

2023-09-27T10:29:33.000Z

@lun ãƒ„ U followed all steps? in that guide

@dumbboy <@1038029376924688394> U followed all steps? in that guide

2023-09-27T10:29:47.000Z

it woks

2023-09-27T10:30:23.000Z

i think yes
i read the documents the whole night yesterday

2023-09-27T10:30:28.000Z

alright restart magic

2023-09-27T10:30:53.000Z

the old saying have you tried turning it on and off again

2023-09-27T10:31:02.000Z

2023-09-27T10:31:09.000Z

~~think we should add this to Next.js faq, it helps a lot~~