Menu
I am having trouble to optimize the tailwindcss with postCss using laravel-mix and Scss. The npm run dev generating correct css. However, with production build npm run prod doesn't export classes I have used in my HTML templates.
{
"name": "school",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"devDependencies": {
"tailwindcss": "^1.2.0",
"cross-env": "^7.0.2",
"laravel-mix": "^5.0.4",
"laravel-mix-purgecss": "^5.0.0-rc.1",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-purgecss');
mix.js('src/js/app.js', 'public/js')
.sass('src/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [tailwindcss('./tailwind.config.js')],
})
.purgeCss();
I have tried without
purgecss ignoreand that too doesn't make any difference.
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;
//@tailwind screens;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="public/css/app.css">
<script src="public/js/app.js"></script>
</head>
<body class="bg-teal-400">
<div class="container">
<h1 class="text-6xl text-orange-500">Hello</h1>
</div>
</body>
</html>
Please have a look at this repository for the entire source code.
Question:
How can I optimize
taliwindcssusingscss,laravel-mixwithpostCssoutside / Non - Laravel project?
325
You are able to pass PostCSS plugins into the sass method as you can see in the following code example.
// webpack.mix.js
let mix = require('laravel-mix');
mix
.sass('assets/scss/app.scss', 'dist', {}, [
require("tailwindcss"),
])
.setPublicPath('web')
;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
