The following code generates the translates but not negative ones so the following doesn't work -translate-x-1/7 but testing translate-x-1/7 it does.
I'm using the negative translate to slide a nav bar off the side of the page.
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
translate: {
'1/7': '14.2857143%',
'2/7': '28.5714286%',
'3/7': '42.8571429%',
'4/7': '57.1428571%',
'5/7': '71.4285714%',
'6/7': '85.7142857%',
},
},
},
variants: {
extend: {
},
},
plugins: [
require('#tailwindcss/forms'),
],
}
I've just tested it and it works fine: https://play.tailwindcss.com/Duhp6l1ejl
What version of Tailwind are you using? I see you are still using purge so probably not the latest. Maybe it was a bug in Tailwind and you just need to update?
Related
I have updated Tailwind V2 to Tailwind V3 in my Sage 9 project by following Tailwind's upgrade guide. When I add a class to my blade file, the new engine doesn't generate the required classes in the css. The only way I seem to get it to generate the classes is by updating (saving a change) my tailwind.config.js. This happens when I use either the yarn build or yarn start commands.
Using bg-blue text-primary as an example; the text colour works, but the background doesn't. Then if I add some slash comments to my tailwind.config.js file, save it and run yarn build then, behold a blue background with red text.
I had to downgrade autoprefixer to v 9.0.0 because of this error: Module build failed: Error: PostCSS plugin autoprefixer requires PostCSS 8. so I don't know whether or not this affects it's ability to generate the classes.
dependencies:
"autoprefixer": "^9.0.0",
"tailwindcss": "^3.0.23",
"postcss": "^8.4.7",
Tailwind.config.js:
module.exports = {
content: [
'./resources/views/**/*.blade.php'
],
theme: {
colors: {
primary: {
DEFAULT: 'red',
},
secondary: {
DEFAULT: '',
},
white: '#fff',
black: '#000',
blue: 'blue',
gray: {
DEFAULT: '',
},
transparent: 'transparent',
},
extend: {
screens: {
'sm' : '567px',
'md' : '768px',
'lg' : '1025px',
'xl' : '1200px',
'2xl' : '1366px',
'3xl': '1660px',
'4xl': '1920px'
},
zIndex: {
'-10': '-10',
}
},
},
plugins: [
globalStyles,
],
}
i think the watch command on npx will help you generate the new css details, see if this post can help you npx --watch required to compile
When using the following in my Webpack config:
{
test: /\.scss$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env'
],
],
},
},
},
"sass-loader"
],
},
I'm noticing that sometimes CSS rules like the following are removed from the bundled CSS output.
img {
margin-inline-end: 1rem;
}
When removing the above Webpack config, the rule above is applied as expected.
More specifically:
when an [dir="rtl"] attribute is set on the html element, the margin-inline-end: 1rem; style exists
when the dir attribute is not set, the margin-inline-end: 1rem; style does not exist in the bundled output
when the 'postcss-preset-env' plugin is removed, the margin-inline-end: 1rem; style exists regardless of the presence of the [dir] attribute
What is causing this behavior and how can I disable it while continuing to use postcss-preset-env for other things like autoprefixer?
By default postcss-preset-env is processing stage 2+ rules, depending on the exact version of cssdb was installed, you might need to tweak the stage option while using postcss-preset-env to a higher value like stage: 3.
And looks like some logical properties like margin-inline-end will be processed into
[dir='ltr'] { margin-right: 1rem } ...
Also rules can also be disabled precisely in the option :
{
/* use stage 2 features + disable logical properties and values rule */
stage: 2,
features: {
'logical-properties-and-values': false
}
}
This github repo vanilla-js-prototype-starter has webpack & PostCSS configured working well, check and see if it can help a bit.
I'm using mathjax in a project and I've been trying to change the colors of all math. I am loading the following configuration file:
window.MathJax = {
jax: ['input/TeX', 'output/HTML-CSS'],
extensions: ['tex2jax.js'],
displayAlign: 'center',
TeX: {
extensions: ['AMSmath.js', 'AMSsymbols.js', 'AMScd.js'],
Macros: {
e: '{\\textrm{e}}',
R: '{\\mathbb{R}}', // this is working!
Z: '{\\mathbb Z}',
KK: '{\\mathbb{K}}'
}
},
tex2jax: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true
},
'HTML-CSS': {
fonts: ['TeX'],
styles: {
scale: 110,
'.MathJax': { padding: '1em 0.1em', color: 'green ! important' }, //Not working
'.MathJax_Display': { 'text-align': 'center' }
}
},
showProcessingMessages: false,
menuSettings: { zoom: 'Double-Click', mpContext: true, mpMouse: true }
}
Everything is apparently working but the HTML-CCS:styles part is not working. I couldn't find a proper reference for this, and I don't know if this version of MathJax (2.7.8) is using a different format.
In this project I'm using nuxt and vuetify, I don't know if this is the problem, but I turn off vuetify and still the styles are not applied to the math display.
Thanks very much for any help,
Milton.
The scale: 110 parameter is not a CSS declaration, so should not be in the styles block (but rather in the HTML-CSS block directly). I suspect that that may be causing the styles not to be generated properly. Try moving the scale up one level and see if that helps.
Note that the HTML-CSS output jax is the slowest one available. You might consider switching to the CommonHTML output jax instead.
I finally found what was the problem. Apparently the new versions of Mathjax changed the name of the CSS classes. The following configuration now works:
Update: Now I'm facing a different problem...that configuration only works in developing mode, when deploy the mathjax css is not working...in that case I think it is the vuetify css. :-(
Update: Now it is working, also in deployed mode. I was loading Mathjax with a the pre-configuration ?config=TeX-AMS-MML_SVG. When I load it without that pre-configuration it works. I don't know why.
window.MathJax = {
jax: ['input/TeX', 'output/CommonHTML'],
extensions: ['tex2jax.js', 'Safe.js'],
styles: {
'.mjx-chtml': { padding: '0.1em 0.1em' }, //new names of the selectors, working!
'.MJXc-display, .mjx-chtml': { color: 'green' }
},
displayAlign: 'center',
TeX: {
extensions: ['AMSmath.js', 'AMSsymbols.js', 'AMScd.js'],
Macros: {
e: '{\\textrm{e}}',
R: '{\\mathbb{R}}',
Z: '{\\mathbb Z}',
KK: '{\\mathbb{K}}'
}
},
tex2jax: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true
},
CommonHTML: {
scale: 105,
linebreaks: { automatic: true }
},
showProcessingMessages: false,
menuSettings: { zoom: 'None', mpContext: true, mpMouse: true }
}
Note that styles are in the core configurations, outside the CommonHTML item.
Thanks for the help!
Milton.
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-+/
},
],
// ...
CSS blocks just went open source and I wanted to incorporate it into my React app while still using the boilerplate CRA webpack because I want to keep all the other functionality.
From what I understand the majority of the configuration is simply adding another babel-loader with the css-block plugin.
So instead of just:
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
You follow it with:
{
test: /\.[j|t]s(x?)$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [require.resolve("babel-preset-react-app")],
cacheDirectory: true,
compact: true,
}
},
// Run the css-blocks plugin in its own dedicated loader because the react-app preset
// steps on our transforms' feet. This way, we are guaranteed a clean pass before any
// other transforms are done.
{
loader: require.resolve('babel-loader'),
options: {
plugins: [
require("#css-blocks/jsx/dist/src/transformer/babel").makePlugin({ rewriter: CssBlockRewriter }),
],
cacheDirectory: true,
compact: true,
parserOpts: {
plugins: [
"jsx",
"doExpressions",
"objectRestSpread",
"decorators",
"classProperties",
]
}
}
},
But, I cannot for the life of me get the second bit to parse anything. It's like it doesn't even exist and my CSS modules are just being referenced inside the class. Result ends up being like:
<div class="/src/test.css">
instead of
<div class="a b cD">
If anyone has any pointers of where I should try to look I would greatly appreciate it!
P.S. For reference I'll include links to the docs below since it's very new
http://css-blocks.com/
https://github.com/linkedin/css-blocks/blob/master/packages/%40css-blocks/website/config/webpack.config.dev.js
I get the example from Linkedin example /website and works fine with react-create-app scripts.
Fallow boilerplate extracted from CSS Blocks by me ralfting/boilerplate-css-blocks... Maybe this help you.