This repository was archived by the owner on Apr 6, 2021. It is now read-only.
This repository was archived by the owner on Apr 6, 2021. It is now read-only.
Doesn't generate negated classes with prefix configured #42
Description
This is specifically in a Laravel project with Mix, though the JIT compilation otherwise works, so I suspect this an issue with the underlying JIT compiler, rather than something Mix-specific.
Without the prefix: "tw-" option in my tailwind.config.js file, the -top-6 class is correctly generated. With the prefix: "tw-" option, the expected tw--top-6 class is nowhere to be found.
This seems to only affect compilation of negated, prefixed classes.
Config and sample HTML.
// tailwind.config.js
module.exports = {
// prefix: "tw-",
purge: ["./resources/**/*.blade.php"],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}// webpack.mix.js
const mix = require("laravel-mix");
const twjit = require("tailwindcss/jit");
mix.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]).options({
postCss: [twjit],
});// resources/views/welcome.blade.php (original)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body class="antialiased">
<div class="flex flex-col bg-gray-100">
<div class="h-screen flex flex-col">
<div class="h-full flex items-center justify-center">
<div class="relative max-w-md bg-white rounded shadow">
<div>
<div class="absolute w-12 h-12 -top-6 left-4 flex items-center justify-center bg-blue-500 rounded p-4">
<span class="font-semibold text-white uppercase">hi</span>
</div>
<div class="px-4 py-8 text-gray-900">
This is a test of the computer's navigational systems.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>// resource/sviews/welcome.blade.php (prefixed)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body class="tw-antialiased">
<div class="tw-flex tw-flex-col tw-bg-gray-100">
<div class="tw-h-screen tw-flex tw-flex-col">
<div class="tw-h-full tw-flex tw-items-center tw-justify-center">
<div class="tw-relative tw-max-w-md tw-bg-white tw-rounded tw-shadow">
<div>
<div class="tw-absolute tw-w-12 tw-h-12 tw--top-6 tw-left-4 tw-flex tw-items-center tw-justify-center tw-bg-blue-500 tw-rounded tw-p-4">
<span class="tw-font-semibold tw-text-white tw-uppercase">hi</span>
</div>
<div class="tw-px-4 tw-py-8 tw-text-gray-900">
This is a test of the computer's navigational systems.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>This also leads to issues when extracting CSS components.
// resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.offset-box {
@apply tw-absolute tw-w-12 tw-h-12 tw--top-6 tw-left-4 tw-flex tw-items-center tw-justify-center tw-bg-blue-500 tw-rounded tw-p-4
}
}Compiling with this set leads to a class does not exist error in the compilation step.
resources/css/app.css The `tw--top-6` class does not exist. If `tw--top-6` is a custom class, make sure it is defined within a `@layer` directive.
5 | @layer components {
6 | .offset-box {
> 7 | @apply tw-absolute tw-w-12 tw-h-12 tw--top-6 tw-left-4 tw-flex tw-items-center tw-justify-center tw-bg-blue-500 tw-rounded tw-p-4
| ^
8 | }
9 | }
at processResult (/Users/michael.dyrynda/tailwind-jit/node_modules/webpack/lib/NormalModule.js:649:19)
at /Users/michael.dyrynda/tailwind-jit/node_modules/webpack/lib/NormalModule.js:743:5
at /Users/michael.dyrynda/tailwind-jit/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/michael.dyrynda/tailwind-jit/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/michael.dyrynda/tailwind-jit/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/michael.dyrynda/tailwind-jit/node_modules/postcss-loader/dist/index.js:102:7)