I'm using tailwind CSS with ant design in next js project. When I use ant components,sometimes components style look wired and sometimes ant components doesn't appear when I use tailwind CSS. I have also disabled preflight of tailwind CSS but doesn't work. Please answer this question.
Related
I'm currently using bootstrap for my modal component but our current project has a css file that is using the same class with bootstrap (.Modal,.Modal-header).
The css styling of both files was messing the modal design.
Any solution for this?
Update
I use ::ng-deep to my css so I can specifically target without conflicting other css file.
I think you should not use Bootstrap components in your class. If this was not helpful, please check ask from https://stackoverflow.com/users/395910/terry or https://stackoverflow.com/users/8213994/aman-gojariya. They helped me too.
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 am new to Tailwind CSS and stumbled across the tailwindcss-forms plugin.
Why exactly do we need that? Does it just provide new classes that I have to apply manually or does it by default apply some classes to forms?
Can't I just apply classes from the regular Tailwind CSS to my forms?
What's the difference to e.g. tailwindcss-custom-forms?
Tailwind CSS is not exactly providing solutions for form elements like Select-tags and co. that work on all major browsers.
If you apply those from Tailwind CSS, you may either add your own elements (e.g. arrows) for a Select tag, inputs, and co. or work with CSS. You can also look on how developers solved these issues with examples from Tailwind Components.
Tailwind CSS Forms was made to make this possible and it works with Tailwind CSS 2 while Tailwind CSS Custom Form is deprecated.
I'm on a web project using bootstrap style, then I incorpored the grocery_CRUD framework and I started having problems with the css.
It seems the grocery_CRUD has priority on the css files, when it renders a table, all style changes.
I want all web site has the bootstrap css and only the tables rendered with grocery_CRUD has its style.
Any solution?
I think you are looking for the "bootstrap" theme at grocery CRUD. Just be aware that it is still in BETA phase. You can simply have a bootstrap theme like this:
$crud->set_theme('twitter-bootstrap');
I answer my question:
It's all about order of loading CSS... just didn't think about it, need to load first grocery_crud theme and then my css file. I had backwards overwriting my style
I need to add Twitter's Bootstrap styles to existing GWT component...
I found more than one project but all of them creates new custom components for that purpose...
I need to stick with GWT standard components and have my app L&F looks like TBootstrap.
Thanks.
You will have a great job to do overriding GWT's default css. Your starting point may be the Developer's Guide - Client Bundle.
Some widget does not accept Bundles, so you may have too to override GWT css in the bootstrap html file.
I believe that you can hack the basic styles with jQuery or overriding CSS styles, but the responsiveness, topbar and other things, I believe thats is pretty impossible...
You can take a look at GWT-Bootstrap.
Hope it helps..