1

I am using laravel/framework v6.16.0, laravel/ui v1.2.0 and TailwinCSS v1.2.0. For setting up, I used the instructions from https://sandulat.com/blog/installing-tailwind-into-laravel/. After minor adjustments concerning the namings, like

  • tailwind.js => tailwind.config.js
  • @tailwind preflight; => @tailwind base;
  • @import 'tailwind'; => @import 'tailwindcss';

everything seemed to work fine and the TailwindCSS classes take effect. My only problem is, that all changes I made in tailwind.config.js are ignored. The files are recompiled (npm run watch), but the changes from tailwind.config.js are not adopted. There are no error messages or other indications.

If I provoke a syntax error in tailwind.config.js, I get an error message. Therefore I conclude that the file is parsed, but as I mentioned without any effect.

Can someone tell me where to start troubleshooting or better tell me where the error could be?

Dong3000
  • 566
  • 2
  • 7
  • 24

3 Answers3

2

These settings are working for me in a fresh project with Laravel 8, Mix 6, and Tailwind v2:

tailwind.config.js

This file is unmodified except for the added purge settings:

module.exports = {
    purge: [
        'resources/views/**/*.blade.php',
        'resources/js/**/*.js',
        './resources/**/*.vue',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

webpack.mix.js

This file is unmodified except for the import for tailwind and the appended tailwind settings. Watchout for that extra {} in the second parameter there.

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

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

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css', {}, [
        tailwindcss('tailwind.config.js'),
    ])
    .options({
        processCssUrls: false,
    });

app.scss

I just added all three tailwind directives for now. The output is quite large, so some editing may be recommended.

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

The URL in the other answer was critical to making it work. This one here: https://laracasts.com/discuss/channels/elixir/multiple-tailwind-configs-for-theming

agm1984
  • 15,500
  • 6
  • 89
  • 113
1

This Laracasts user's comment: https://laracasts.com/discuss/channels/elixir/multiple-tailwind-configs-for-theming solved this issue for me.

I needed to call mix.sass with [tailwindcss: configfile] as the third parameter. Using the same in .options did not work.

Oláh Tamás
  • 11
  • 1
0

Alright, installing https://github.com/laravel-frontend-presets/tailwindcss solved my problem.

Dong3000
  • 566
  • 2
  • 7
  • 24