I'm using Tailwind CSS with PostCSS via Gulp. Just about everything works great. I'm trying to reference values from the config theme object in my CSS. I'm able to do the following just fine:
height: theme('spacing.12');
However, when I try to use theme() inside of calc() (just like in the documentation):
height: calc(100vh - theme('spacing.12'));
I get a Parse error from gulp-postcss ("Expecting 'SUB', 'LPAREN'....")
Is this a Tailwind bug?
It turns out it was an issue in my tool chain. Specifically, I was using the node package postcss-cssnext - which it turns out is deprecated. Once I removed this from my Gulp file, the error went away:
Related
I am using Visual Studio Code for a pure HTML, JavaScript and CSS project. I imported a CSS file from an old project that was provided to me by a colleague and a few of the lines in the CSS file are marked as having an error in VS Code, such as this one:
.some-class .some-sub-class {
padding-left: calc(~"50px + .75rem");
}
VS Code notes two errors here:
) expected (squiggly line under the tilde)
at-rule or selector expected (squiggly line under the closing bracket)
I was able to determine that both errors were caused by the tilde ~ character, since removing it suppresses the errors, but I need the tilde for those CSS rules.
The file is just a .css file if that's relevant, and simply closing it doesn't show any error anymore.
Is there an extension I should add, remove, or configure to make that error go away?
here are the extensions I have installed so far. The issue was happening before I installed any of them:
This is not valid CSS format, this seems to be LessCSS, which means you'd have to select proper filetype: Less.
I am building Vue application with Nuxt and tailwindcss and I am dealing with a problem which is only occurring on production (or with built app) not while testing on development environment. I am suspecting nuxt build is doing some magic with my css because I am not using any CSS plugins like cssnano or postcss.
I am using tailwind class "ring-2" which is defined as
box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
While I see the ring style applied on development, it disappears on production.
When I inspect the element in chrome i see that --tw-ring-inset looks like not defined.
In the code I see that this variable is defined like this
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
Which is probably resolved to --tw-ring-inset: ; which might be taken as wrong syntax and hence undefined.
I see people having problems with this like here https://github.com/postcss/postcss/issues/1404 or here https://github.com/cssnano/cssnano/issues/1350 but I am not using any of this libraries.
Have anybody encountered same problem or have any idea how to solve this?
Thank you.
I don't know what exactly the problem is, but I removed 'extractCSS: true' property from Build property inside nuxt.config.js. And it works well for me.
image
I know it may be a silly question but I cannot find the answer anywhere.
I'm using Tailwind with CRA and CSS modules.
I've overwritten the default theme colors to my own ones.
When I try to use the colors inside my CSS modules like this,
.amountSign {
color: theme('colors.pink');
}
it seems like theme() is not recognized and in the browser the property value seems to be invalid.
Should I import something from somewhere to make theme() recognizable? Thanks in advance
Tailwind's functions and directives only work if your CSS is proccessed by Tailwind.
From what you've shared it looks like your CSS modules aren't ran through Tailwind and so Tailwind's theme() function is never compiled down to pure CSS.
This blog outlines the steps for using Tailwind with CRA.
I'm using angularjs along with the angular-material framework. I started writing my project based on the angular-seed project.
In my project I have a form that contains <md-select> elements. My problem is that the selection view is always only as big as 5 select options. I want to see more options when scrolling.
I looked around the angular-material source code and found this !default SASS variable which controls how many options are displayed. I want to make it bigger.
The way I understand it, !default means SASS will ignore the value of that variable if it's already defined elsewhere.
But I also understand that the SASS preprocessor takes a single SASS file as input and outputs a single CSS file - which means I can't override a SASS variable in one file from another file.
I'm also quite confused on which component is responsible for compiling the .scss files found in the angular-material framework and at what stage are they compiled. Are they compiled when installed by Bower? Are they compiled when I call npm start?
I'm new to all these technologies so even though those stuff might seem trivial, I don't really know what to search for to find answers to these questions, I tried and found nothing.
Well I just looked around and realized that the angular-material Bower package comes with css files that have already been pre-processed from scss files. There's nothing I can do to affect that variable.
To show more options in the md-select component I just resorted to the ugly solution of adding these hard-coded pre-calculated attributes to my stylesheets:
md-select-menu {
max-height: 784px !important; }
md-select-menu md-content {
max-height: 784px !important; }
EDIT:
Actually I found this solution even nicer:
md-select-menu {
max-height: 100vh !important; }
md-select-menu md-content {
max-height: 100vh !important; }
It fills as much of the view as possible with options
I'm trying Zurb Foundation 5.
So, I've created a new project and try changing settings. When I changed, for example, $row-width: rem-calc(1170); in my-project/scss/settings.scss, it compiled (in my-project/stylesheets/app.css) into:
.row {
max-width: rem-calc(1170);
}
It seems like it doesn't know about rem-calc function.
How to make it calculate rem-calc properly?
Your function doesn't exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes that if it isn't a Sass function that it must be a CSS function.
Related: Test whether a Sass function is defined