Tailwind ignores Vue.js SFC template classes

[honzahana]

What version of Tailwind CSS are you using?

2.2.15

What build tool (or framework if it abstracts the build tool) are you using?

Webpack + PostCSS + vue-loader

@fullhuman/postcss-purgecss:^4.0.3, @tailwindcss/forms:^0.2.1, @vue/compiler-sfc:^3.2.16, autoprefixer:^10.3.5, compression-webpack-plugin:^7.1.2, css-loader:^5.2.7, css-minimizer-webpack-plugin:^1.3.0, file-loader:^6.2.0, image-webpack-loader:^7.0.1, img-optimize-loader:^1.0.7, mini-css-extract-plugin:^1.6.2, postcss:^8.3.7, postcss-loader:^4.2.0, style-loader:^2.0.0, svgo:^2.7.0, tailwindcss:^2.2.15, vue-loader:^16.8.1, webpack:^5.53.0, webpack-cli:^4.8.0, webpack-dev-server:^3.11.2 @flowjs/flow.js:^2.14.1, lodash:^4.17.21, vue:^3.2.16

What version of Node.js are you using?

v14.17.6

What browser are you using?

N/A

What operating system are you using?

Kubuntu 20.04 LTS

Reproduction URL

N/A

Describe your issue

Tailwin ignores the class specified in the section inside the .vue file. Expansion @ directives in the <style> section work fine. Classes are not processed in build mode or in JIT mode.

Webpack build commands:

"build": "env NODE_ENV=production TAILWIND_MODE=build webpack --config resources/webpack.config.js",
"watch": "env NODE_ENV=development TAILWIND_MODE=watch webpack --config resources/webpack.config.js -w",

/package.json

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "env NODE_ENV=production TAILWIND_MODE=build webpack --config resources/webpack.config.js",
    "watch": "env NODE_ENV=development TAILWIND_MODE=watch webpack --config resources/webpack.config.js -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@tailwindcss/forms": "^0.2.1",
    "@vue/compiler-sfc": "^3.2.16",
    "autoprefixer": "^10.3.5",
    "compression-webpack-plugin": "^7.1.2",
    "css-loader": "^5.2.7",
    "css-minimizer-webpack-plugin": "^1.3.0",
    "file-loader": "^6.2.0",
    "image-webpack-loader": "^7.0.1",
    "img-optimize-loader": "^1.0.7",
    "mini-css-extract-plugin": "^1.6.2",
    "postcss": "^8.3.7",
    "postcss-loader": "^4.2.0",
    "style-loader": "^2.0.0",
    "svgo": "^2.7.0",
    "tailwindcss": "^2.2.15",
    "vue-loader": "^16.8.1",
    "webpack": "^5.53.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@flowjs/flow.js": "^2.14.1",
    "lodash": "^4.17.21",
    "vue": "^3.2.16"
  }
}

/resources/webpack.config.js

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const zlib = require("zlib");
const { VueLoaderPlugin } = require('vue-loader');

const production = process.env.NODE_ENV === 'production';

module.exports = {
	mode: production ? 'production' : 'development',
	entry: path.resolve(__dirname, './js/main.js'),
	output: {
		path: path.resolve(__dirname, '../dist'),
		filename: '[name].js',
		clean: production
	},
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								config: path.resolve(__dirname, "postcss.config.js"),
							}
						}
					}
				]
			},
			{
				test: /\.(jpe?g|png|gif)$/i,
				use: [
					{
						loader: `img-optimize-loader`,
						options: {
							name: '[folder]/[name].[ext]',
							compress: {
								// This will transform your png/jpg into webp.
								webp: {
									quality: 90
								},
								disableOnDevelopment: true,
							},
						},
					},
				],
			},
			{
				test: /\.svg$/i,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: '[folder]/[name].[ext]',
						}
					},
					{
						loader: 'image-webpack-loader',
						options: {},
					},
				]
			},
			{
				test: /\.vue$/,
				loader: 'vue-loader'
			}
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css'
		}),
		new CompressionPlugin({
			filename: "[path][base].br",
			algorithm: "brotliCompress",
			test: (production) ? /\.(js|css|svg)$/ : /\.(svg)$/,
			compressionOptions: {
				params: {
					[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
				},
			},
			threshold: 0,
			minRatio: 0.8,
			deleteOriginalAssets: false,
		}),
		new VueLoaderPlugin()
	],
	optimization: {
		minimize: production,
		minimizer: [
			`...`,
			new CssMinimizerPlugin()
		],
	},
	devServer: {
		contentBase: [
			path.join(__dirname, '../dist'),
			path.join(__dirname, '../'),
		]
	}
};

/resources/tailwind.config.js

const colors = require('tailwindcss/colors');

module.exports = {
	mode: 'jit',
	purge: ['./**/*.tpl','./*.html','./js/vue/*.vue'],
	darkMode: false, // or 'media' or 'class'
	theme: {
		extend: {
			fontFamily: {
				'sans': ['Poppins', 'sans-serif']
			},
			screens: {
				'xl': '1200px'
			},
			colors: {
			},
		},
		container: {
			center: true,
		},
	},
	variants: {
		extend: {
		},
	},
	plugins: [require('@tailwindcss/forms')],
}

/resources/postcss.config.js

const path = require('path');

module.exports = {
  plugins: {
    tailwindcss: {config: path.resolve(__dirname, 'tailwind.config.js')},
    autoprefixer: {},
  },
}

/resources/main.js

import { createApp } from 'vue/dist/vue.esm-bundler.js'
import TestComp from './vue/Test.vue';

const app = createApp({});
app.component('test-comp', TestComp);
app.mount('#vueapp');

/index.html

<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link href="dist/main.css" rel="stylesheet">
    <script src="dist/main.js" defer></script>
</head>
<body>

<div id="vueapp">
    <test-comp></test-comp>
    <div class="bg-green-900">This is green</div>
</div>

</body>
</html>

/resources/js/vue/test.vue

<script>
export default {
    data() {
        return {
        }
    }
}
</script>

<template>
    <div>
        <div class="bg-pink-900">this is not pink</div>
        <div class="myclass">this is purple</div>
    </div>
</template>

<style>
.myclass {
    @apply bg-purple-900
}
</style>

In test.vue, the first line is not pink, the second line is purple.

Any idea? Thank you.

[adamwathan]

Hey! My guess is that this is wrong:

purge: ['./**/*.tpl','./*.html','./js/vue/*.vue'],

The Vue file is ./resources/js/vue/test.vue which won't match ./js/vue/*.vue.

If you can provide an actual reproduction repository that someone can quickly clone and play with that will help a lot, unfortunately it's just too much work to recreate a project from scratch by copying all this code by hand.

[honzahana]

Hi @adamwathan, source code is here: https://www.dropbox.com/s/htl9ghekq0hfoff/tailwindcss-error.tar.gz?dl=1

[lukewarlow]

Your purge config is wrong it should be this.

purge: ['./**/*.tpl','./*.html','./resources/js/vue/*.vue']

While you're correct the path would be correct from the tailwind file itself, the paths are relative to the top level not to the file. The proof of this is how your html file is in the top level not the resources folder but the purge works.

I verified by downloading your project and setting this which does indeed add bg-pink-900 to the build output.