Tailwind CSS is a popular utility-first CSS framework and Next.js is a server-side rendering framework for React. Combining the two can lead to powerful web applications. However, configuration issues may arise when using Tailwind CSS with Next.js. This article will discuss how to fix configuration issues if Tailwind CSS is not working with Next.js.
Steps to Create a NextJS Application:
Step 1: First install Node.js on your computer. You can download it from the official website of Nodejs.
Step 2: Open a terminal window and navigate to the directory where you want to create your project.
Step 3: Run the following command on the terminal to create a new Next.js app
npx create-next-app myapp --typescript --eslint
Step 4: Install Tailwind
Once your next project is created, open the project’s root directory and install the tailwind dependencies with the following command.
npm install -D tailwindcss postcss autoprefixer
Step 5: Create a Tailwind config file
Run the following command to create a tailwind config file, which can be used to extend the tailwind’s functionality.
npx tailwindcss init -p
Project Structure:
How to fix configuration issue if Tailwindcss not working with next.js?
Step 7: Now open your root folder in any text editor and write the following content in the ‘tailwind.config.js’ file
Javascript
/* @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: [], } |
Step 8: Open the stylesglobals.css file inside the styles directory and add the following imports at the top:
CSS
@tailwind base; @tailwind components; @tailwind utilities; |
To configure Tailwind CSS with Next.js manually, you need to install the necessary dependencies and other files
Step 1: First open your command prompt and write this command
npm install -D tailwindcss postcss autoprefixer
This command installs three dependencies – tailwindcss, postcss, and autoprefixer – that are required to use Tailwind CSS in your project.
Step 2: Now create a postcss.config.js file in the root of your project and add the following code
Javascript
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } |
This code is a configuration file for PostCSS, a tool used to transform CSS styles. The configuration file specifies the plugins to be used with PostCSS. It contains two plugins tailwindcss and autoprefixer.
Step 3: After that Create a tailwind.config.js file in the root of your project and add the following code:
Javascript
module.exports = { mode: 'jit', purge: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', ], theme: { extend: {}, }, variants: {}, plugins: [], } |
It’s a configuration file that specifies various settings for how Tailwind CSS should be used in your project.
Step 4: Finally, in your pages/_app.js file, import Tailwindcss using the following code
Javascript
import 'tailwindcss/tailwind.css' |
If you have followed the above steps and Tailwind CSS is still not working with Next.js, there are a few approaches you can take to resolve the issue:
- First, make sure that you have installed the latest version of Tailwind CSS, postcss, and autoprefixer on your system, To check that use the following command on your command prompt
How to fix configuration issue if Tailwindcss not working with next.js?
If it says up to date then you have some other problem.
- Next, try clearing your cache by running the following command in your command prompt:
npm cache clean --force
and to verify it uses the command :
npm cache verify
How to fix configuration issue if Tailwindcss not working with next.js?
- If the above approaches do not work, try deleting your node_modules folder and reinstalling all of your dependencies using the following command in the command prompt:
rd /s /q node_modules && npm install
How to fix configuration issue if Tailwindcss not working with next.js?
These were the following approaches to fix the configuration issue if Tailwindcss not working with next.js
Example 1: Now add your tailwind utility classes to ‘layout.txt file’
Javascript
import './globals.css' export default function Home() { return ( <h1 className="text-3xl font-bold underline"> MY FIRST APP </h1> ) } |
Steps to Run:
npm run dev
Output:
