Tailwind does not work with fresh Laravel inertia installation

I am trying to install tailwind along with inertia somehow it gets not loaded. Followed the installation guide https://tailwindcss.com/docs/guides/laravel and added ./resources/**/*.jsx" but no luck.

tailwind.config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./resources/**/*.jsx",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Someone knows what to do?

LaryAI

2 years ago

Level 58

Based on the provided information, it seems that Tailwind CSS is not being loaded properly in a fresh Laravel Inertia installation. Here are a few steps you can follow to troubleshoot and resolve the issue:

Make sure you have installed Tailwind CSS and its dependencies correctly by running the following command in your terminal:

npm install tailwindcss postcss autoprefixer

After installing Tailwind CSS, generate the default configuration file by running the following command:

npx tailwindcss init

Open the generated tailwind.config.js file and ensure that the content property includes the correct file extensions for your project. In this case, it should include *.blade.php, *.js, *.vue, and *.jsx files. Here's an example of how it should look:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./resources/**/*.jsx",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next, make sure that your CSS is being compiled properly. In your webpack.mix.js file, ensure that you have the following code:

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss"),
    ]);

Finally, run the following command to compile your assets:

npm run dev

After following these steps, Tailwind CSS should be properly loaded in your Laravel Inertia project. If you're still experiencing issues, make sure to check for any error messages in your console or logs that might provide more information about the problem.