In this tutorial, we will learn how to build your custom checkbox using tailwind css within 10 minutes.
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
#CSS #Tailwind CSS #Tailwind
#tailwind css #css #tailwind
how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.
#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css
Building a photo gallery has been a tough nut to crack for so many years. Throughout my career, I’ve used
<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.
#tailwind css #css grid #css
In this tutorial video, we cover how to incorporate Tailwind CSS into your Svelte project
package.json scripts: https://gist.github.com/DevAscend/f71934805a76f23d0aab5f16406693da
📚 Library(s) needed:
Creating the Svelte project:
npx degit sveltejs/template your-awesome-project
Adding the dependencies:
npm install autoprefixer postcss-cli tailwindcss concurrently cross-env --save-dev
🖥️ Source code: https://devascend.com/d/github
💡 Have a video request?
Suggest it in the Dev Ascend Discord community server or leave it in the comments below!
00:21 Creating Svelte project
00:46 Installing dev dependencies
01:00 Creating postcss and tailwind files
01:47 Setting up scripts
02:25 Importing the index.css file
#tailwind #svelte #devascend
#tailwind #css #svelte #tailwind css
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.
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