The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

Add Tailwind CSS to your Next.js app

posted on 18.2.2023 by Below Surface in "Next.js"

In the existing directory of your Next.js app, run these commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then open your tailwind.config.js file and add these lines:

content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
],

The whole file may look like this now:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And there might be an error: "Parsing error: Cannot find module 'next/babel'". Thanks to Stack Overflow. This is the fix:

  1. Create a file called .babelrc within the root directory of your Next.js app
  2. Add this to the file:
{
    "presets": ["next/babel"],
    "plugins": []
}

Then open your .eslintrc.json file and replace all code with this:

{
  "extends": ["next/babel","next/core-web-vitals"]
}

Now the last thing to do is to add this to the main .css file:

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

Finished! Check the resources for further information

Tags:

tailwind css
next.js

Sources:

https://tailwindcss.com/docs/guides/nextjshttps://stackoverflow.com/questions/68163385/parsing-error-cannot-find-module-next-babel

More posts of this category

Do a static export of a Next.js website

Doing a static export in Next.js is easy and working great on basic web hosting services

Next.js

Change the port of a Next.js app

How to manually set the port from 3000 to any other number

Next.js

Next.js 13 - how to set dynamic HTML head titles

How to take a slug string and turn it into a HTML title tag

Next.js

Suppress Next.js img tag warnings

If you don't want to use their Image elements, this is how to disable the warnings

Next.js

Add a robots.txt to your Next.js website

How to add your robots.txt file

Next.js

Next.js 13 Tailwind CSS hot-reload issue fix

With the currently experimental app directory, hot-reload does not work properly

Next.js

How to clear the cache of a Next.js application

How to create a fresh build without any cached data

Next.js

How i finally fixed "sh: 1: next: not found"

My release pipeline failed constantly and it took me three hours to figure out the issue

Next.js

How I fixed "Parsing error: DeprecationError"

'originalKeywordKind' has been deprecated since v5.0.0 (...)

Next.js