Question 221107 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Tailwind Styles are apparently not getting applied in my Next.js Project

I was coding along a Next.js tutorial project and noticed that my project was quite off…I figured it was my tailwind styles that weren’t getting applied for whatever reason, tried tweaking the ‘tailwind.config.js’ a bit but nothing seemed to work.

I then tried creating a new Next project entirely with create-next-app@latest and straight up ran it with npm run dev — I left all the code unedited/as they came.

I was expecting to get something like this:
The normal boilerplate "Get Started" page for Next.js

but I got this instead:
How the default "Get Started" page for Next.js looks on my pc.

So I’m kinda stumped at this point…I don’t what else to do on my part.

Thanks for helping out!

Tags:

2

Answers


  1. 0

    I’m sorry to hear that you’re facing difficulties with your Next.js project. Let’s try to troubleshoot the issue step by step:

    1. Check Node.js and npm Versions: Ensure that you have the latest version of Node.js and npm installed on your system. You can check their versions by running the following commands in your terminal:

      node -v
npm -v

      If your versions are not up to date, you can download the latest versions from the official Node.js website (https://nodejs.org/) and install them.

    2. Verify create-next-app Installation: Double-check that you have successfully installed create-next-app globally. You can install it using the following npm command:

      npm install -g create-next-app

    3. Create a New Project: Once you have confirmed that create-next-app is installed, create a new Next.js project using the following command:

      npx create-next-app my-next-app

      This will create a new Next.js project named my-next-app.

    4. Run the Development Server: Change to the project directory and start the development server:

      cd my-next-app
npm run dev

      Now, check if the default "Get Started" page is displayed correctly in your browser. If it looks fine, it indicates that your Next.js installation is working as expected.

    5. Check for Errors: If the default page still doesn’t look as expected, open your browser’s developer tools (usually by pressing F12) and check the console for any error messages. These error messages can give you valuable information about what might be causing the issue.

    6. Check Network Requests: Ensure that all necessary resources, such as CSS files from Tailwind CSS or other dependencies, are being loaded correctly. Check the Network tab in your browser’s developer tools to see if there are any failed or missing network requests.

    7. Verify Tailwind CSS: If the issue seems to be related to Tailwind CSS, make sure you have installed and set up Tailwind correctly in your project. Double-check the installation steps and configurations in your tailwind.config.js and postcss.config.js files.

    8. Clear Cache: If you have made changes to the configuration files or installed new dependencies, try clearing your browser cache and restarting the development server.

    If after going through these steps, you are still facing issues, it’s possible that there might be a specific compatibility problem or an external factor causing the problem. In that case, you can consider seeking help in the Next.js community forums or GitHub repository, as others might have encountered similar issues. Be sure to provide as much detail as possible about your setup and any error messages you encounter to receive more specific assistance.

    Login or Signup to reply.
  2. 0

    I can think of 2 reasons why Tailwind styles might not be working. The first thing you should check is if the Tailwind style sheet is being included in the of the page.

    If the style sheet does not appear or is empty on your website check:

    Have you included the tailwind directives in your global.css file?

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

    Are you running the tailwindcss watch process to include used utility classes in the stylesheet?

    yarn tailwindcss:build --watch

    I hope it helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search