I'm trying to install Tailwind CSS v2.0 into a clean Laravel install, but it is not installing complete css properties like .p-2 and other properties i am following official installation https://tailwindcss.com/docs/guides/laravel but still it is not

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

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

tailwind.config.js

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

\resources\css\app.css

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

CodePudding user response：

Recently Tailwindcss update their framework(v3.0.7) in which css file is download in purgecss(https://purgecss.com/), thats why you cant download all the classes and properties of tailwindcss.

For that what you can do is download downgraded version of tailwindcss you can download it in your custom folder not even in Laravel.

1. first, run laravel new your_project_name in your terminal,
2. run npm install or npm i on your terminal
3. run cd/your_project_name in your terminal
4. run npm install -D tailwindcss@^1.9.2 in your terminal
5. then go to your project folder and open it on vs code or any code editor
6. add below code in you

mix.js('resources/js/app.js', 'public/js')

.postCss('resources/css/app.css', 'public/css', [

    require('tailwindcss'),

]);

7. add below code in resources\css\app.css

   @tailwind base;

   @tailwind components;

   @tailwind utilities;

8. last run npm run dev in your cmd

Thank you.

CodePudding user response：

Check to see that you're not running npm run prod as this purges your css files and removes unused styles.

Run npm run dev and see if that helps.