Adding Tailwind CSS

TailwindCSS is a CSS framework that helps you build custom styles for your React app. To use Tailwind, you'll need to install it.

To install Tailwind CSS and its dependencies, run the following command:

npm install -D tailwindcss postcss autoprefixer

Next, run the TailwindCSS init command

npx tailwindcss init -p

Modify the tailwind.config.js so it includes the following code

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create a main.css file

mkdir public
mkdir styles
touch public/styles/main.css

Add the following to /public/styles/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Modify pages/index.js with the following code

export default function Home() {
  return <>
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  </>
}

Create an _app.js file in pages

touch pages/_app.js

Add the following code to pages/_app.js

import '../public/styles/main.css'

export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

Test the code by running.

npx next dev

You should now see the 'Hello World!' text is lager, bold, and underlined.