I'm trying to use safelist patterns (formerly whitelist patterns) with Tailwind CSS V3.1.6 and have the following. It's not working, but essentially I'm trying to safelist all values beginning with bg-, text- and border-
safelist: [
// Retain all classes starting with...,
{
pattern: /bg-/,
pattern: /text-/,
pattern: /border-/,
},
],
You can safelist multiple entrances within an array of objects like
safelist: [
{pattern: /bg-./},
{pattern: /text-./},
{pattern: /border-./},
]
but in your case it would be shorter to use pipe sign "|"
safelist: [
{pattern: /(bg|text|border)-./}
]
More about safelisting with regular expressions can be found here
Related
As some of my html comes from database, some of used CSS classes are not presented in HTML file in time of build npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css.
So how can I disable JIT to have all possible CSS in ./dist/tailwind.css?
just-in-time engine or JIT is enabled by default on V3 and we don't have a key value to put on our tailwind.config file to disable it (at least for now).
The way they propose is use safelisting classes
https://tailwindcss.com/docs/content-configuration#safelisting-classes
If you know which classes are, or at least the pattern you can declare those on the safelist.
safelist: [
'bg-red-500',
'text-3xl',
'lg:text-4xl',
]
If you want to have all possible CSS you can try this but it will generate a huge css file (20M aprox) but maybe you can adapt it to what you need .
safelist: [
{
pattern: /.*/,
variants: [
"first",
"last",
"odd",
"even",
"visited",
"checked",
"empty",
"read-only",
"group-hover",
"group-focus",
"focus-within",
"hover",
"focus",
"focus-visible",
"active",
"disabled",
],
},
],
In CRA React App, I have a common style guide in SCSS which is imported in module level scss files using #use, using dart SASS as well.
I have changed the references from #import to #use and was expecting Webpack will handle as common code, will create a separate chunk
Problem
How to make one common chunk for a common style guide.
Screenshots
This can be achieved by Extract Text Plugin, which...
Extracts text from a bundle, or bundles, into a separate file. For more check this.
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
foo: path.resolve(__dirname, "src/foo"),
bar: path.resolve(__dirname, "src/bar"),
},
optimization: {
splitChunks: {
cacheGroups: {
fooStyles: {
type: "css/mini-extract",
name: "styles_foo",
chunks: (chunk) => {
return chunk.name === "foo";
},
enforce: true,
},
barStyles: {
type: "css/mini-extract",
name: "styles_bar",
chunks: (chunk) => {
return chunk.name === "bar";
},
enforce: true,
},
},
},
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
}
Though, I'm not sure if you're looking for the above one or another plug-in called CommonsChunkPlugin, which acts similar.
The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points.
Example:
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
// or
names: ['app', 'subPageA'],
// the name or list of names must match the name or names
// of the entry points that create the async chunks
children: true, // use all children of the chunk
async: true,
minChunks: 3, // 3 children must share the module before it's separated
})
I'm seeing src in your images, which tells me that those screen captures you took is in development, not production.
In development webpack should use style-loader and directly load all styles and inject it into the DOM using style tags to speed up development. So seeing multiple files is normal in development.
In production webpack should use something like mini-css-extract-plugin and compile all your sass to a single css file.
The only way to get multiple css files in webpack for production is to create multiple entries for each file.
So I'm making an App with React 17, tailwind and craco and its works find in dev but when i build with craco, tailwind don't include classes as h-36, h-44, col-span-1...
That's my tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
There are some things that you should check:
Make sure that you put the tailwind classes in className attribute instead of class attribute
Do not use string concatenation to create class names. So, instead of writing <div class="text-{{ error ? 'red' : 'green' }}-600"></div>, write <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Make sure that all your files are included in the purge command. Since you only specify './src/**/*.{js,jsx,ts,tsx}', this meant that tailwind will only scan what class should not be purged on those files with those extensions. This means that if you use tailwind classes in html files, tailwind will not scan those files. Also the same case if you somehow have files outside of ./src.
For me, I had to ensure that I was including all of the file types in my purge array within tailwind.config.js. Hope this helps someone - mine was missing the .vue files.
My Laravel tailwind purge array now looks like:
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
I am trying to preserve all TailwindCSS colour classes (i.e bg-green, bg-red, text-green, text-red) when it is processed via PurgeCSS. These colour classes are set in the CMS rather than code so we cannot search the code for them as they don't (all) exist here.
Therefore I want to use the whitelisting feature of PurgeCSS to retain all classes that beging with 'bg-' or 'text-'. However, the pattern I have below doesn't seem to be doing the trick? Any ideas how to tweak it?
whitelistPatterns: ['^bg\-', '^text\-'],
The issue appears to be simply to use regexp, not a string.
whitelistPatterns: [/^bg-/, /^text-/], // Retain all classes starting with...
If you run newer versions of tailwind: whitelist and whitelistPatterns merged into safelist. This info cost me a day of research.
purge: {
options: {
safelist: ["bg-red-50"],
},
// ... or even
options: {
safelist: [/^bg-/, /^text-/]
},
}
purge: {
options: {
safelist: ["whitelisted"],
},
// ...
}
In TailwindCSS version 3.0.24 it is integrated a bit differently.
// Example tailwind.config.js (see my config file)
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
safelist: [
'text-2xl',
'text-3xl',
{
pattern: /bg-(red|green|blue)-(100|200|300)/,
variants: ['lg', 'hover', 'focus', 'lg:hover'],
},
],
// ...
}
Source: Documentation
Im doing it based on official suggestion like this:
whitelistPatterns: [/\-blue\-/],
whitelistPatterns: [/\-pink\-/],
...etc
Selectors with ending or starting it does not fit your needs.
Think this one
.xl\:hover\:bg-pink-900:hover
or this one
.xl\:bg-cover
Based on this tailwind documentation, using something like this worked for a similar problem I had. The '+' works as wildcard.
module.exports = {
// ...
safelist: [
{
pattern: /bg-+/
},
{
pattern: /text-+/
},
],
// ...
Grunt novice here....what I am trying to do seems so simple, but I am at my wits end here. I am trying to concat the JS from a few separate bower components and then do the same with the CSS. Here is the relevant code from my grunt.file:
bower_concat: {
all: {
dest: 'builds/development/js/_bower.js',
cssDest: 'builds/development/css/_bower.css'
}
}
This is the last item in my config so does not need a comma after the final "}".
All the needed files are listed under "main" in their respective bower.json files. For example:
"main": [
"dist/owl.carousel.js",
"dist/assets/owl.carousel.css",
"dist/assets/owl.theme.css",
"dist/assets/owl.transitions.css"
],
I am positive these paths and file names are correct. The JS concats fine. The CSS does nothing. If I remove the "dest:..." line from my gruntfile (in an attempt to concat ONLY the CSS) terminal gives me the error ":Warning: You should specify "dest" and/or "cssDest" properties in your Gruntfile".
I clearly am specifying this. Help!
Finally got it to work with this:
bower_concat: {
all: {
dest: {
js: 'builds/development/js/_bower.js',
css: 'builds/development/css/_bower.css'
},
},
}
Essentially needed one more set of nested curly braces inside of "dest:". For the record you DO NOT need to specify mainFiles if they are designated in the bower_components json.
Ah, easy. You need to specify the component or library and then its mainFiles in your Gruntfile under grunt-bower-concat. Don't worry about messing with the individual components' files.
bower_concat: {
all: {
dest: 'builds/development/js/_bower.js',
cssDest: 'builds/development/css/_bower.css'
}
mainFiles: [
owlcarousel: [
"dist/owl.carousel.js",
"dist/assets/owl.carousel.css",
"dist/assets/owl.theme.css",
"dist/assets/owl.transitions.css"
],
],
}
FYI My current bower-concat for owlcarousel looks like this so double-check your bower_components folder tree structure.
bower_concat: {
all: {
dest: 'builds/development/js/_bower.js',
cssDest: 'builds/development/css/_bower.css'
}
mainFiles: [
owlcarousel: [
"owl-carousel/owl.carousel.js",
"owl-carousel/owl.carousel.css",
"owl-carousel/owl.theme.css",
"owl-carousel/owl.transitions.css"
], // (Version 1.3.2)
],
}