#How can i link my tailwindcss to next.js repo

25 messages · Page 1 of 1 (latest)

uneven sky
#

i have tailwindcss.config.js，postcss.config.js，but it didnt works

iron heraldBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

uneven sky
#

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

violet mauve
#

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

violet mauve
hollow geyser
#

he probably had typo IG

mint panther
#

@uneven sky restart the dev server

#

delete .next

fathom knoll
#

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

violet mauve
#

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

uneven sky
fathom knoll
#

Tailwind CSS does a 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

uneven sky
hollow geyser
#

@uneven sky U followed all steps? in that guide

uneven sky
#

!!

iron heraldBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1156537008466972702 message)

uneven sky
fathom knoll
#

alright restart magic bigbrain

violet mauve
#

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

uneven sky
fathom knoll
#

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

uneven sky
#

thank u guys~~