I'm trying to make my background image responsive using tailwind. Can't find background-position-x in their documentation.
At the moment, TailwindCSS doesn't have a utility for this. Except for adding it as a utility either by a plugin or in CSS, if you're using the JIT Mode, the shortest way to do this is adding it as an arbitrary property.
For example adding this: [background-position-x:-100px] will generate:
.\[background-position-x\:-100px\] {
background-position-x: -100px;
}
Simply use the bg-center bg-bottom... bg-left-bottom classes, as explained here.
If you need more flexibility, you can use TailwindCSS with PostCSS, and edit theme.backgroundPosition in your tailwind.config.js. You can then add more complex rules there.
Related
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 would like to use display: grid; in my Angular project. According to https://caniuse.com/#feat=css-grid it seems that IE 11 only partially supports it by using -ms-. prefix.
Would it be enough that I install autoprefixer from npm and let it do the magic, or should I just use flexbox instead with the flex-layout package?
It is a very safe option to use autoprefixer and 95% of the scenarios will work. Still test well however, because for the other 5% it might be needed to write some specific CSS. But in general, like I said, you will save a lot of time with it and you will find out that you can easily use grid in IE11 because of this.
An example is "gap". IE11, has no alternative for this so autoprefixer will not save you from that one.
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
Currently i'm using elements with position: absolute for transitions but i should use translate instead. How to achive a fallback when translate is not available?
Without having any additional information, I'm assuming you'd like to use translate when it is available, and position: absolute when it is not. I found an excellent article that lists the pros and cons, and may solve some of your woes.
http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Moving forward, you may want to look into the modernizr library, as it provides awesome tools for making your cutting-edge features work well on older browsers. I've posted a link to the CSS docs below.
http://modernizr.com/docs/#features-css
Finally, what i was doing is that i checked if CSS3 features are supported with JS. If not, i've attached a .fallback class to the body so i can make separate rules as a fallback.i've added like the following:
#animdiv{
transform: translate(0,100px);
}
.fallback #animdiv{
top: 100px;
}
I am relatively new to CSS and wondering whether its possible to "Wrap" ID's so you don't have to repeat them over and over ?
i.e.
#home
{
some stuff
}
#home .header {
some stuff
}
#home .sub_header {
some stuff
}
Is it possible to "wrap" the .header and .sub_header so I don't have to keep repeating #home all the time ? i.e. something like this so the ID can collectively wrap the classes?
#home
{
some stuff
}
##home [
.header {
some stuff
}
.sub_header {
some stuff
}
]
Excellent question! This is not possible with native CSS I'm afraid. There are no real short cuts to take.
If you work with a lot of CSS, there are pre-compilers that allow you to use enhanced notation, and convert it into CSS on the fly.
There's for example
xCSS it can nest child elements.
Then there's LESS, it's written in Ruby so you need that installed (as far as I understand, I haven't used it myself yet) but it's perfectly suitable for editing CSS in any environment. Check the "nested rules" section on the front page.
If you are just getting started with CSS, you may want to stick with the native notation first, though. But the moment it gets really tedious, those tools are a great help.
Unfortunately this isn't possible in just CSS, you can however achieve this using CSS generators such as LessCSS which have their own syntax and have features like nesting and variables.
If you use PHP, consider using lessphp (http://leafo.net/lessphp/docs/), or http://www.symfony-project.org/plugins/sfLessPhpPlugin for symfony
Another great CSS framework is CSS Scaffold
CSS Scaffold is powered by PHP, is easy to use
allows deep selector nesting
constants
custom mixins (reusable pieces of css code)
implements a grid creation framework
caching of already parsed css files for production (+minify)
If you are not coding a big site, I would still recommend plain css