Trouble with running tailwind

@melmoniry try to add processCssUrls: false in your mix options.

@melmoniry

Tailwind CSS requires Node.js 12.13.0 or higher.

Try to follow this steps:

• https://tailwindcss.com/docs/guides/laravel
• https://tailwindcomponents.com/blog/how-to-install-tailwindcss-in-laravel-8

all my CSS that i already had is gone it becomes all words with no containers or anything. is there anything am missing? or it should behave this way?

You are not missing anything. And this is the way Tailwind sets up the project. Reason Preflight

Upon installing Tailwind, Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc. That is why you are seeing all words with nocontainer or anything.

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

You can disable preflight:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
     preflight: false,
    }
  }

Reason for setting up Preflight because each browsers have their own way of styling things. An input type text on Chrome will look different from Firefox, Opera and others. Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

I would suggest to update your old CSS to use Tailwind.

perhaps make sure your existing css file not using the same file name as the the output file the default is app.css as after the npm run dev command it will override the file.

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');