rightform.blogg.se - Screen cheatsheet

#Screen cheatsheet full#
#Screen cheatsheet code#

Arbitrary values: if we ever need to set a margin of 108px instead of something close to what Tailwind offers, like m-28 (which equals to margin: 7rem.

Theme customization: we can add our customization to the theme section of the file, where we can easily customize the color palette, spacing scale, typography, and more.

Let's look at some of the different custom styles we can apply: Tailwind supports customizing your styles in all these ways. Be it the color options, the scaling system, adding custom CSS, etc. Sometimes we need more than the default style options a CSS framework comes with. By default, this variant uses the prefers-color-scheme CSS media feature. We use dark:bg-slate-800 for the card body, dark:text-white for the link text and dark:text-gray-300 for the paragraph.

If we take the above card example, then we would add the following new utilities for dark mode: Tailwind includes a dark variant that lets you style your website differently only when the dark mode is enabled.

#Screen cheatsheet full#

On small screens, the image's dimensions (width and height) are automatically set by default, but on medium and above screens, we constrained the width to a fixed size and ensured that the image is all full height using the md:h-full and md: w-48 utilities. Donec accumsan eros elementum massa dignissim.īy default, all the elements have the display: block property, but we add the md:flex utility to the outer div, which enables our card item to be a flexbox on medium screens and larger.įor the image, we add md:shrink-0 so that our image doesn't shrink on medium and larger screens when the parent is a flex container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This means that the default unprefixed utilities like uppercase take effect on all screen sizes while prefixed utilities like md:uppercase only take effect at that specified breakpoint and above.įor example, if we want to make a card element responsive, we can write something like this: One rule of thumb we need to remember while making our website responsive with Tailwind is that it uses a mobile-first breakpoint system. To make any HTML element responsive, we need to prefix the utility class with the breakpoint name, as shown above, followed by the : character. Then typically, using vanilla CSS, you will write the following code: div Let's take a look at a straightforward styling of a box element.

#Screen cheatsheet code#

Also, you don't need to write traditional CSS code anywhere all you need to know is what these utility classes do and how they work. Here 'utility-first' means that it works on low-level utilities, which are essential to style any HTML element we want. Tailwind is a utility-first CSS framework that lets you add styles to your web pages without writing a single line of custom CSS code.

Learning and using it in small demo pages for enterprise-level projects is highly recommended and this Tailwind CSS cheat sheet is here to help you with that. "Tailwind CSS" is becoming synonymous with the frontend tech stack.