Reinhard's avatar

Laravel Mix and Tailwindcss

Hello everyone, I am struggling with setting up Laravel-mix and using a component from TailwindUIKit. When I run npm run development the required css for my page is properly compiled, but my JavaScript, and the tailwind classes within the JavaScript is not. I also tested adding the JavaScript (couple of lines of code to open and close menus) directly to my blade files, in which case the function calls from button clicks works, but the css classes still does not get compiled.

So I have 2 problems. First I do not understand why webpack is not loading the JavaScript that I added directly to my resources/js/app.js, and second how do I get the tailwind classes within the JavaScript to be compiled?

Here are my config files:

//webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .options({
        postCss: [
            tailwindcss('./tailwind.config.js')
        ],
    })

I noticed in my public/app.js my JavaScript code is placed inside ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {

//tailwind.config.js
module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
    purge: [
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
}

And my resources/js/app.js. The compiled app.js is loaded in the head of my blade template <script src="{{ asset('js/app.js') }}" defer></script>

require('./bootstrap');
console.log(123);//This does show in the browser.
let icon1 = document.getElementById("icon1");
let menu1 = document.getElementById("menu1");
const showMenu1 = (flag) => {
....
....

Thank you, Reinhard.

0 likes
4 replies
manojo123's avatar

Can you please try this syntax instead:

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

And also confirm if you add these lines

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

into your ./resources/css/app.css File

You can remove this line in your webpack.mix.js file

const tailwindcss = require('tailwindcss');

Reference: https://tailwindcss.com/docs/guides/laravel

Reinhard's avatar

@manojo123 I tried using your syntax but am still running into the same issues. I do have the @tailwind base;... in my app.css/app.scss.

Just to further clarify the issue that I am having:

<!--.blade.php -->
<div id="some_element" class="container h-24">Hello</div>
<button id="hide" onclick="hideElement()">Hide Element</button>
<button id="shrink" onclick="shrinkElement()">Hide Element</button>
<script>
  function hideElement() {
    document.getElementById("open").classList.toggle("hidden");
  }
</script>

So here my laravel mix will compile the container h-24 classes found in the html of the blade file, but not the hidden class in the script section. Clicking on the hide button will add the hidden class to the element, but there will be no css to hide it.

Then if I have:

//resources/app.js
function shrinkElement() {
  document.getElementById("open").classList.toggle("h-12");
}

In the case of the JavaScript that I added to resources/app.js, neither the function shrinkElement will be available, nor will the tailwind class h-12 be compiled.

Reinhard's avatar
Reinhard
OP
4 years ago
Best Answer
Level 1

I got everything working. The reason I thought my JavaScript was not working is because webpack wraps it in a closure.

And for my tailwind config I had to move the sources from purges to content. From the docs: Since Tailwind no longer uses PurgeCSS under the hood, we’ve renamed the purge option to content to better reflect what it’s for.

The classes were however compiled from the blade files before, so there might be backwards compatibility with the tailwind config, and I updated the JavaScript and used jQuery, so my initial issue of the classes with vanilla js like document.getElementById("open").classList.toggle("h-12") is likely not solved, but I won't be using that anyway.

Please or to participate in this conversation.