Robyn  Hudson

Robyn Hudson

1628386500

Practice Tailwind CSS in Bangla with Blog Design: Overview

In this series, we will design a blog site with Tailwind CSS and we will make it responsive.

Source code:
https://github.com/rslahmed/Tailblog

#tailwind #tailwindcss #CSS 

 

What is GEEK

Buddha Community

Practice Tailwind CSS in Bangla with Blog Design: Overview
Fancorico  Hunt

Fancorico Hunt

1605064642

Design A Landing Page using Tailwind CSS

When I started learning how to use the Tailwind CSS library, I really didn’t know what to expect and wasn’t quite sure how I’d fare with the library. It turns out, TailWind’s a whole lot easier to use than I thought and makes designing a landing page a breeze.

One remarkable feature I noticed was the ease with which I could define classes for various responsive breakpoints without writing a single line of CSS media queries. That for me was awesome!

For this tutorial, I’ll assume you have a Tailwind project set up, if you don’t you can grab one here. For the fonts, I’m using Poppins. All the code presented here should be placed in your body tag.

We’ll start off with creating and styling the main element that would house the hero section:

<main class="h-full flex items-center px-6 lg:px-32 bg-purple-900 text-white">

</main>

The Tailwind classes added to the main element does the following:

  1. h-full: Give the main element a height of 100%. Pretty much like what you’d do with a style declaration of height: 100vh in CSS.
  2. flex: Make the main element a flexbox, just like you would with a style declaration like display: flex in CSS.
  3. items-center: Position the contents of the main element in the center of the main element, just like you would with align-items: center in CSS.
  4. px-6 lg:px-32: Assign horizontal padding of 1.5rem to all devices from mobile to medium and horizontal padding of 8rem for devices from large to devices beyond. You can add as many other breakpoints to suit your design needs, this is the wonderful thing about Tailwind.
  5. bg-purple-900: Gives the main element a purple background with an opacity of 90%. This is equivalent to background-color: purple in CSS.
  6. text-white: Gives the main section and its child elements a default white color (#FFFFFF).

#tailwind #design #tailwind-css #web #css

Robyn  Hudson

Robyn Hudson

1628386500

Practice Tailwind CSS in Bangla with Blog Design: Overview

In this series, we will design a blog site with Tailwind CSS and we will make it responsive.

Source code:
https://github.com/rslahmed/Tailblog

#tailwind #tailwindcss #CSS 

 

Chelsie  Towne

Chelsie Towne

1595326919

Getting started with Tailwind CSS

Content

  1. What is Tailwind
  2. How to install Tailwind
  3. Configuring Tailwind
  4. a. Breakpoints
  5. b. Colors
  6. c. Spacing
  7. d. Variants
  8. Improving your Tailwind workflow
  9. Frequently Asked Questions

Image for post

Image for post

What is Tailwind

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

That’s right, the text above is copied straight from Tailwind’s website, but it describes exactly what Tailwind is. Unlike frameworks like Bootstrap or Bulma, Tailwind doesn’t come with any predefined styles or layouts. But isn’t it much easier to get started with a pre-styled framework? Well, at some point, it absolutely is, and with the newest Bootstrap version (for example), it’s also much easier to customize these out-of-the-box styles.

With Tailwind, however, you get full control of everything. Every single feature of Tailwind is customizable. When you’re just starting as a web developer, this might feel a little overwhelming. Though, when you start getting more and more familiar with web design and need the ability to be in control of every single styling property, you now no longer need to overwrite any prewritten classes. For example, when you need to update a single color, the only thing you need to do is to make a small change to your Tailwind config file. After all the assets have been built, the color will be changed throughout your whole project. No more searching through all of your CSS files to replace this one color.

#css #ui #web-design #tailwind-css #design

Popular Tailwind CSS Plugins and Extensions - Themesberg Blog

By reading this article you will browse a list of the most popular plugins and extensions for the utility-first CSS framework, Tailwind CSS. Although the default code base of the framework already covers a lot of the needs when building user interfaces, you can never get enough plugins and extensions powered by the open-source community.

One of the requirements for a plugin to appear on this list is to be open-source with no other strings attached so that the developers browsing this list can stay assured that they can use the plugin for their Tailwind CSS powered project.

Check out the list of Tailwind CSS Plugins and Extensions on Themesberg.

#tailwindcss #tailwind #tailwind-css #tailwind-css-plugins #themesberg

Robyn  Hudson

Robyn Hudson

1628390220

Practice Tailwind CSS in Bangla with Blog Design: Create Sidebar

In this series, we will design a blog site with Tailwind CSS and we will make it responsive.

Practice Tailwind CSS in Bangla with Blog Design: Create Sidebar

Source code:
https://github.com/rslahmed/Tailblog

#tailwindcss #tailwind #CSS