Building an Inbox UI with Tailwind CSS

Building an Inbox UI with Tailwind CSS

#tailwind #tailwindcss #css

What is GEEK

Buddha Community

Building an Inbox UI with Tailwind CSS

Building a Photo Gallery With CSS Grid and Tailwind CSS

Building a photo gallery has been a tough nut to crack for so many years. Throughout my career, I’ve used <table> layouts, <div>s with brittle margins and set widths, and tried my hand at flexbox. While all of these methods have worked, none of them felt like that silver bullet solution.

Then one day, the CSS gods bestowed upon us the magical power of CSS grids. Now, making a grid-based layout is an absolute delight. And, when we use grids with Tailwind CSS, we can create beautiful, functional UIs in a fraction of the time it used to take. So, let’s hop right in and see how we can use them to make a photo gallery.

  • The Set-Up
  • Our HTML
  • Layouts With CSS Grid
  • Mobile Layout
  • Styling With Tailwind CSS
  • The Wrap-Up

#tailwind css #css grid #css

Eric  Bukenya

Eric Bukenya

1624705980

How To Build an About Me Page With Laravel Sail and Tailwind CSS

Introduction

Laravel Sail is a Docker development environment included by default in Laravel since version 8. It allows you to quickly get a PHP development environment up and running, tailored for running Laravel applications with built-in support for NPM / Node.

In this guide, you’ll bootstrap a new Laravel application with Laravel Sail and create a styled “about me” landing page using Tailwind CSS, a utility-first CSS framework designed for rapidly building custom user interfaces. At the end, you’ll have a base that you can use to further develop a Laravel application using Tailwind CSS for the front end and Sail for the development environment.

Prerequisites

Although the code shared in this guide should work seamlessly across multiple environments and systems, the instructions explained here were tested within an Ubuntu 20.04 local system running Docker and Docker Compose. Regardless of your base operating system, here’s what you’ll need to set up in order to get started:

  • Docker installed on your local machine. If you’re running Ubuntu 20.04, you can follow Steps 1 and 2 of How To Install and Use Docker on Ubuntu 20.04 to set it up. Windows and MacOS users need to install Docker Desktop instead.

  • Docker Compose installed on your local machine. Docker Compose comes included by default with Docker Desktop for both Windows and MacOS systems, but Linux users need to install the Compose executable, following Step 1 of How To Install and Use Docker Compose on Ubuntu 20.04.

  • A code editor for PHP (optional). A code editor helps making code easier to read and to format, and can improve your productivity by pointing out issues before you execute your code. You can follow our guide on How To Set Up Visual Studio Code for PHP Projects to set up VSCode, a free code editor, within your local development environment.

  • Step 1 — Creating a New Laravel Application Using the Laravel Builder Script

  • Step 2 — Using Laravel Sail

  • Step 3 — Setting Up Tailwind CSS with Laravel

  • Step 4 — Creating a Landing Page

  • Step 5 — Styling Your Landing Page with Tailwind CSS

#tailwind css #laravel #css #tailwind

What is Tailwind CSS useful for?

Let’s talk Tailwind.css. It’s new, it’s customizable, it’s responsive, and a utility-first CSS framework, let’s try it out!

The beauty of Tailwind.css is that to use it is pretty simple. In good old basic CSS, you will declare classes and specifically code the design elements that will come from the class you’ve created(i.e. Font-family, color). In Tailwind, you also use class names, but different from classic CSS, you pull from a pre-created library of class names that you will have access to once you download Tailwind into your app. It’s a matter of understanding what class names you’ll need, and that is going to take a little searching on the Tailwind Docs Website search bar. Nothing like a handy search!

#tailwind-ui #css #web-development #tailwind-css

How to Build a Responsive Timeline Design using Tailwind CSS

Build a completely responsive timeline design with Tailwind CSS. Learn about the useful Tailwind utilities, customizing the framework, responsive design using Tailwind, extracting classes using @apply directive and so much more.

Starter Template GitHub Repository: https://github.com/ThirusOfficial/tailwind-css-starter-postcss

Source Code: https://github.com/ThirusOfficial/reponsive-timeline-tailwind-css

#CSS #Tailwind CSS #Tailwind

#tailwind css #css #tailwind