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
Related
I am primarily a Java developer and I'm not 100% familiar with the technologies I'm working with here.
I have a React application written in TypeScript which gets run through a Parcel bundler prior to deployment. When I run the application for local testing on my dev machine, the spacing of checkboxes in the application looks great:
The problem is after I build the application and run it on production, the checkboxes are no longer properly aligned:
I have managed to track it down to a difference in the CSS between local:
and production:
If you notice, the production CSS has an extra margin-bottom: 0px in the top CSS file (.css-1h4ws66). This is my problem--it is overriding the margin-bottom: 10px in the .css-lidh19 file and thus ruining the spacing.
My problem is that I have no idea where the 0px bottom margin is coming from. It doesn't appear to be defined in any of the styles in the application.
I realize this isn't enough information for anyone to be able to say "this is your problem; do that," but nevertheless I am interested in any ideas on how to investigate the issue.
I didn't find why there was a margin-bottom: 0px that caused the issue in the first place, but I managed to find the place where the 10px margin was defined and add !important, which resolved the issue.
For anyone dealing with chakra-ui, don't just look for properties margin-bottom, marginBottom, or even the shorthand mb. Also look for my properties, as they define both the top and bottom margins for a component.
I'm going to set up a new project and would like to have these two packages together, but not sure, so the question is that using Tailwindcss with antdesign Is a good practice?
Does anyone have any experiences?
Each package has its own theme manager for instance for colors, typography, dark mode and so on. How do you manage theme, with tailwinds or antd or both? And why?
Both packages have Grid support, which one would you prefer?
Let's have your insights?
After some research, I found these results
Some examples that uses both libs:
https://github.com/plamworapot/next-antd-tailwindcss
https://github.com/dospolov/react-redux-saga-antd-tailwind-boilerplate
https://github.com/cunhamuril/pocs
It recommended trying to commit to only one framework
Tailwind is pretty much a design system using utility classes to make writing css easier therefore it can be pretty much used with any other ui library just make sure to disable the default styling that Tailwind inject into your default styling by disabling the preflight option in config :
module.exports = {
corePlugins: {
preflight: false,
}
}
One slight issue with using both ant-design and tailwind-css is tailwind's some of default styles will break ant-design components...
I recently came a cross an issue where ant-design image preview was not functioning correctly and the image was not centered.
expected result
image one
vs what I got when using tailwind with ant-design
image two
turns out tailwind will change default image display property from "inline-block" to "block" and breaks tailwind image preview component
I resolved my issue by reseting display property on images
img {
display: unset !important;
}
apart from this little tweaks you will be good to go using both of them
There's no problem to use Tailwind CSS and Ant Design together.
Tailwind CSS could be used to custom styling on Ant Design components.
Check this link to see an example with Next, Ant Design and Tailwind CSS:
https://github.com/plamworapot/next-antd-tailwindcss
You can use Bootstrap with ant design right? Think Tailwind same as Bootstrap. Tailwind is a CSS library you can use it with any setup and framework there no extra configurations needed. Just pass the Tailwind class names.
When it comes to theming. It's a context. Ant design will grab it's context and tailwind grab it's. We don't need to think or worry about it
Well for me I needed to use tailwind to override the default ant design css styling so what I ended up doing was adding important:true to the tailwind config object (as per tailwind docs tailwind config docs for important config)
module.exports = {
....,
important:true,
};
I know some people frown at using important (as do I) but I think this is one of the uses it was created for.
I'm looking for a way to improve performance by minifying my app's CSS class names. This approach is used by large websites and is also described in this article.
Does anybody have an idea on how to do this with Angular CLI v10+ ? Ideally I'd want to add a webpack plugin while keeping the CLI for compilation, or a similar approach with minimal footprint, obviously for production builds only.
You can achieve something using the ViewEncapsulation API. By default it uses Emulated which generate large CSS class names. If you change that in your components to ShadowDom. This will encapsulate the styles and will shift everything to use Shadow DOM. With Shadow DOM the styles won't be leaked outside the components. You have to test it though and check for browsers support because it's not supported everywhere. Also, global styles might not work as you expect.
Edit: I also found this interesting article that explain something similar using Angular.
I have been experiencing this issue for a long time. I have a lot of projects with pure html/css/js. in my css file there are a lot of codes in which i have written to get an image from directories. but the problem is that the image does not exist. For example:
.bg-img {
background-image: url("./../img/foo.jpg");
}
in this example foo.jpg does not exist in this directory. but i did not use .bg-img class in html. So this did not caused any problem as i was not using it. But while converting this to React i noticed that React has stricter rules and caused problems with compiling.
So is there any way that i can make react neglect/miss these problems and continue compiling.
By the way, the reason why i have these unnecessary css codes causing problems is that i have copy pasted from another template's css codes and did not removed them as there was a bunch more of them.
So Please don't respond me like: "remove unnecessary css codes"
Thank you for your response :).
Are you using strict mode in React? https://reactjs.org/docs/strict-mode.html Another thing - you should probably simply remove the styles you don't use :) it will help with your warnings/errors as well ;)
I have a problem when using md-buttons, md-select or md-field in a vue project created by the vue CLI from the webpack template.
I have a MWE of the situation here, featuring the three introduction examples from the vue material website on each type of form item combined with the vue-cli template. It doesn't look very nice, but if you run it it breaks down as follows:
The first row are a set of radio buttons; however, the buttons are invisible (yet you can click on them, get a ripple effect and the correct value is recorded by vue)
Next is a select box; however, the background of the box is transparent.
Finally there are a few text boxes; however, the outlines seem to be transparent.
I can solve the issue with the select boxes by inserting a style block
<style>
.md-menu-content-container {
background-color: white;
}
</style>
and that will make md-select work as expected. I still decided to include it here, because it seems related to the other issues and may have a common origin.
Unfortunately, I have not figured out how to solve the other issues yet or which attribute to modify to "patch" the problem. So any help or pointers are highly appreciated.
It appears that when using he latest version of vue-material, the default template has to be loaded explicitly. Hence adding
import 'vue-material/dist/theme/default.css'
to the main.js file from vue-cli seems to fix this issue.