Jetstream: Tailwind Scaffolding for the Laravel Framework

Introduction

Laravel Jetstream is a beautifully designed application scaffolding for Laravel. Jetstream provides the perfect starting point for your next Laravel application and includes login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management.

Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding.

Official Documentation

Documentation for Jetstream can be found on the Jetstream website.

Contributing

Thank you for considering contributing to Jetstream! You can read the contribution guide here.

Code of Conduct

In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Download Details: 
Author: laravel
Source Code: https://github.com/laravel/jetstream 
License: MIT
#laravel #tailwind

Jetstream: Tailwind Scaffolding for the Laravel Framework
Justen  Hintz

Justen Hintz

1650696020

Onglets dynamiques avec AlpineJS et TailwindCSS

Onglets dynamiques avec AlpineJS et TailwindCSS

Dans cette vidéo, nous allons apprendre à créer des onglets (tabs) dynamiques en utilisant AlpineJS, TailwindCSS et les Blade components.

Pour en savoir plus:

🔗 Code complet: https://github.com/ludoguenet/alpinejs-blade-tabs 

🔗 Pour une meilleure assimilation du cours rendez-vous sur la documentation: https://alpinejs.dev/ 

#alpinejs #tailwdincss #blade #laravel #laravel9 #tailwind 

Onglets dynamiques avec AlpineJS et TailwindCSS
Alfie Mellor

Alfie Mellor

1650083473

Nextjs Blog Theme: A Customizable Blog Starter Built with Next.js & Tailwind CSS

A customizable blog starter using:

  • Next.js v12
  • Tailwind v3.0
  • Built-in MDX v1 support
  • Includes modern design with dark & light themes

🎉 We’re really excited about the Bejamas + Netlify collaboration and we were going to celebrate it with some swag, but we realized we could put that money into supporting OSS and our ecosystem even more! After all, who needs another t-shirt or sticker?!

Click this link to vote for your favorite Open Source project!

Preview of blog theme. Author named Jay Doe and blog's name is "Next.js Blog Theme" with one blog post

Take a gander at the demo.

Click here to watch the template walkthrough!

Getting Started


You can get started with this project in two ways: locally or using the setup wizard.

Setting Up Locally

If you're doing it locally, start with clicking the use this template button on GitHub. This will create a new repository with this template's files on your GitHub account. Once that is done, clone your new repository and navigate to it in your terminal.

From there, you can install the project's dependencies by running:

yarn install

Finally, you can run your project locally with:

yarn run dev

Open your browser and visit http://localhost:3000, your project should be running!

Using the Setup Wizard

Preview of Setup Wizard showing the initial page of a setup form

Through the setup wizard, you can create your blog in a few clicks and deploy to Netlify.

Configuring the blog

The config is based on environment variables to make it easy to integrate with any Jamstack platform, like Netlify.

Here are the variables you can edit: | Variable | Description | Options | --- | --- | --- | | BLOG_NAME | the name of your blog, displayed below the avatar || | BLOG_TITLE | the main header (h1) on the home page || | BLOG_FOOTER_TEXT| the text in the footer || | BLOG_THEME | the theme to pass to Tailwind | default | | BLOG_FONT_HEADINGS | the font-family for all HTML headings, from h1 to h6| sans-serif (default), serif, monospace| | BLOG_FONT_PARAGRAPHS | the font-family for all other HTML elements | sans-serif (default), serif, monospace|

All of the env variables can be configured through the Wizard or through setting the project's environment variables. You can do this in your Netlify dashaboard (Site settings/Build & deploy/Environment/Environment variables).

If setting an environment variable isn't your cup of tea, the defaults can be changed in utils/global-data.js. You can also remove the variables and hard code blog information where these variables are used in the code base.

Adding new posts

All posts are stored in /posts directory. To make a new post, create a new file with the .mdx extension.

Since the posts are written in MDX format you can pass props and components. That means you can use React components inside your posts to make them more interactive. Learn more about how to do so in the MDX docs on content.

Download Details: 
Author: netlify-templates
Source Code: https://github.com/netlify-templates/nextjs-blog-theme 

#next #tailwind #nextjs #tailwindcss #webdev #programming #developer 

Nextjs Blog Theme: A Customizable Blog Starter Built with Next.js & Tailwind CSS

Style Guide Generator for Tailwind CSS

Get a beautiful, auto-generated style guide based on your Tailwind CSS configuration settings. Either paste the content of your tailwind.config.js file, or load the configuration file from an open-source GitHub repository. You can then share your style guide with others.
Not sure what this means? Check out the example Style Guide based on the Tailwind CSS website.

Original article source at https://styleguidefortailwind.com/

#tailwindcss #tailwind #css #programming 

Style Guide Generator for Tailwind CSS

How to Create a Landing Page from Scratch with Tailwind CSS

Tailwind Crash Course | Project From Scratch

In this video, we will set up Tailwind CLI and create a landing page from start to finish, going over many of the common utility classes and then deploying it to InMotion Hosting using Git.

Timestamps:
0:00 - Intro
2:45 - Getting Started
4:58 - Install & Setup Tailwind CLI
7:39 - NPM Scripts & Output
11:00 - Customizing & Config
13:25 - Navigation Area + Spacing, Flex, Responsive Classes, etc
24:06 - Hero Section
30:43 - Class Name Order Convention
33:44 - Features Section
44:58 - Testimonial Section
54:15 - CTA Section
59:34 - Footer
1:10:59 - Hamburger Menu HTML
1:15:38 - Custom CSS (Background SVGs)
1:19:45 - Custom CSS (Hamburger Menu)
1:25:08 - Menu JavaScript
1:28:27 - Deploy To InMotion Hosting

💻  Code:
https://github.com/bradtraversy/tailwind-landing-page 

Frontend Mentor Challenge:
https://www.frontendmentor.io/challenges/manage-landing-page-SLXqC6P5 

#tailwindcss #tailwind #programming #developer #webdev 

How to Create a Landing Page from Scratch with Tailwind CSS

How to use Tailwind CSS with a React Project

How To Use Tailwind CSS With React

Setting Up Tailwind CSS In Your React Project With Ease

Tailwind CSS is a utility-first CSS framework which makes it very easy to apply great styling to your React web application by choosing from the framework’s ready-made CSS classes. This easy approach makes Tailwind CSS very popular among today’s CSS frameworks and speeds up the development & styling process significantly.

Setting up your React project to be able to make use of Tailwind CSS is very easy and comprises only very few steps. In the following tutorial you can find the step-by-step approach of installing Tailwind CSS into your React project and get started using Tailwind’s CSS classes for styling.

Link to blog post: https://medium.com/codingthesmartway-com-blog/how-to-use-tailwind-css-with-react-9dd78bbdc0e0 

#react #reactjs #tailwind #tailwindcss

How to use Tailwind CSS with a React Project
Dylan  Iqbal

Dylan Iqbal

1649034113

Build a Facebook Clone with Spring Boot, Next.js, Tailwind CSS, Redux Toolkit, Next-Auth

Build Facebook with Spring Boot!  - (Next.js, Tailwind CSS, Redux Toolkit, Next-Auth)

In this Spring Boot tutorial, you will learn Spring Boot full stack with Next Js, Next-Auth js, React-Redux Toolkit and Tailwind CSS. Next Js is a Framework for React Library to build front-end apps. For this Spring Boot tutorial, you will learn how to build an API, along with a React application that will consume the API.

We'll be creating a Facebook clone that will help you to understand Tailwind CSS and how to build UI's with Tailwind CSS.

📚Course Content📚
⌚ (00:00) Intro & Demo
⌚ (04:38) Creating Next Js App
⌚ (08:32) Installing tailwind CSS
⌚ (13:00) Creating Components
⌚ (15:17) Building Header
⌚ (34:27) Building Sidebar
⌚ (46:57) Implementing Next-Auth Authentication
⌚ (55:36) Building Login Component
⌚ (01:06:14) Building Feed
⌚ (01:08:59) Implementing Create Post Component
⌚ (01:18:22) Building Post Feed
⌚ (01:30:34) Implementing Right Sidebar
⌚ (01:45:44) Handling add Post Functionality
⌚ (02:00:59) Implementing Redux and Redux Toolkit
⌚ (02:15:25) Building Backend Service
⌚ (02:25:06) Implementing add Post backend Service
⌚ (02:33:50) Implementing fetch Post Backend Service
⌚ (02:37:29) Completing Add Post from Frontend
⌚ (02:44:17) Handling fetch Post and Scroll

🗒 Project Source Code:
UI: https://github.com/shabbirdwd53/facebook-clone 
Backend: https://github.com/shabbirdwd53/facebook-clone-service 

#springboot #nextjs #tailwindcss #redux #next #react #tailwind

Build a Facebook Clone with Spring Boot, Next.js, Tailwind CSS, Redux Toolkit, Next-Auth

How to Build Intercom's Inbox UI from Scratch with Tailwind CSS

Build Intercom's Inbox UI from Scratch with Tailwind CSS

In this Tailwind CSS tutorial, Peter Meehan rebuilds Intercom's inbox UI from scratch with Tailwind CSS while explaining CSS and Tailwind utility class fundamentals.
 

#tailwindcss #tailwind #css

How to Build Intercom's Inbox UI from Scratch with Tailwind CSS
Duong Tran

Duong Tran

1648720065

Tailwind CSS 3.0 + React: Xây dựng Landing Page có Responsive, Dark Mode

Tailwind CSS 3.0 + React - Xây dựng Landing Page có responsive, dark mode ( 2/2)

Qua video này chúng ta sẽ tìm hiểu cách set up Tailwind CSS 3.0 cùng với React để xây dựng mobile layout cho landing page của chúng ta

Mốc thời gian:
0:00 - Tóm tắt lại phần 1
0:45 - Tạo animation cho số
6:03 - Cách theo dõi height + width của màn hình
11:50 - Làm menu responsive
14:32 - Responsive trong Tailwind CSS
19:37 - Làm Slogan responsive
20:00 - Grid trong Tailwind CSS
25:00 - Làm Content responsive
29:16 - Darkmode trong Tailwind CSS
30:30 - Tạo custom Hook (useDarkMode)
34:54 - Sử dụng useDarkMode
38:40 - dark:
41:46 - Lời kết

😻 Github repo (image):
https://github.com/anhduy1202/Youtube 

😎 Extensions mình xài trong video (IDE: VS Code):
- TailwindCSS Intellisense ( Gợi ý code Taliwind CSS)
- Prettier (Code Formatter để code nhìn thẳng hàng ngay ngắn)
- Night Owl (No italics) (VS Code theme)

#tailwindcss #css #tailwind #react 

Tailwind CSS 3.0 + React: Xây dựng Landing Page có Responsive, Dark Mode
Duong Tran

Duong Tran

1648719924

Xây dựng Mobile Layout cho Landing Page với Tailwind CSS and React

Tailwind CSS 3.0 + React - Xây dựng Landing Page có responsive, dark mode ( Phần 1/2 )

Qua video này chúng ta sẽ tìm hiểu cách set up Tailwind CSS 3.0 cùng với React để xây dựng mobile layout cho landing page của chúng ta

Mốc thời gian:
0:00 - Giới thiệu
0:23 - Ưu điểm của Tailwind CSS
1:45 -  Nhược điểm của Tailwind CSS
3:13 - Khách mời đặc biệt
3:28 - Giới thiệu project 
5:10 - Setup React
7:40 - Setup Tailwind CSS
12:00 - Bắt đầu code
16:24 - Gradient trong Tailwind CSS
19:00 - Tạo custom color + size
21:43 - Mobile-first cho Tailwind CSS
23:50 - Tạo NavBar
25:45 - Xài Google Font trong Tailwind CSS
28:25 - Flexbox trong Tailwind CSS
32:00 - Tải React Icons 
37:25 - Tạo Slogan
40:27 - Button trong Tailwind CSS
46:52 - Overflow trong Tailwind CSS
47:43 - Tạo Content
53:33 - BoxShadow trong Tailwind CSS
1:02:25 - @apply trong Tailwind CSS
1:04:07 - Tạo mobile menu
1:09:48 - Lời kết

😻 Github repo (image):
https://github.com/anhduy1202/Youtube/tree/nerdcard/src/assets 

😎 Extensions mình xài trong video (IDE: VS Code):
- TailwindCSS Intellisense ( Gợi ý code Taliwind CSS)
- Prettier (Code Formatter để code nhìn thẳng hàng ngay ngắn)
- Night Owl (No italics) (VS Code theme)

#tailwindcss #react #tailwind #css

Xây dựng Mobile Layout cho Landing Page với Tailwind CSS and React
Hoang  Ha

Hoang Ha

1648716937

Học Tailwind CSS - Xây dựng một trang Landing Page App Order đồ ăn

Học Tailwind CSS (build một trang Landing Page cho App)

Hello các bạn, trong tutorial này chung ta sẽ học về cơ bản của Tailwind CSS. Và dự án chung ta sẽ build ra là một trang landing page giới thiểu môt Application để user order đồ ăn.

GitHub: https://github.com/PASSIONCORNERS/tailwind_vn 

#tailwind #tailwindcss #css #webdev 

 

Học Tailwind CSS - Xây dựng một trang Landing Page App Order đồ ăn

Build Intercom's Messenger UI from Scratch with Tailwind CSS

Build Intercom's Messenger UI from Scratch with Tailwind CSS

In this Tailwind CSS tutorial, Peter Meehan and I rebuild Intercom's messenger UI from scratch with Tailwind CSS using Tailwind Play

https://play.tailwindcss.com/6aopf7Gc3r 

#tailwindcss #tailwind #css #programming #intercom

Build Intercom's Messenger UI from Scratch with Tailwind CSS
Helene  Ward

Helene Ward

1648548548

How to Build a Static Website with Eleventy and Tailwind CSS

Tailwind CSS makes it very quick to style web pages. However, the most common complaints devs have with Tailwind CSS is that:

1. It’s hard to look at the huge list of class names in the markup. Especially for simple websites, if we don’t use any frameworks, there’s no way to create components. So, all the markup ends up in a single file and this definitely looks messy!

2. Without using components, code is repeated - which means - repeating all the utility classes making it less maintainable.Now these are the two problems that can be solved using the static site generator - Eleventy along with a templating engine called Nunjucks.

0:00 Introduction
2:52 Install Eleventy
3:45 Hello World in Eleventy
6:27 Styling in Eleventy using regular CSS
7:38 Eleventy Configuration File
9:24 Install Tailwind CSS in Eleventy
10:58 Tailwind CSS Config for Eleventy
12:21 Build Tailwind CSS in Eleventy
14:46 Start Project - Two-page Static Website
15:18 Create layouts in Eleventy
18:52 Create and reuse partials like header and footer
19:42 Include files in Eleventy
27:28 Include sections from different files
33:20 Macros in Eleventy for components
40:11 Adding another page in Eleventy
41:42 Highlighting current page menu item using if statements45:04 Quick summary

Part 2 - Deploy to Netlify video coming soon

Github Repository: https://github.com/ThirusOfficial/eleventy-tailwind

#tailwindcss #tailwind #css #netlify 

How to Build a Static Website with Eleventy and Tailwind CSS

How To Create Responsive Side Navigation using TailwindCSS & AlpineJs

In this tutorial, we are going to create a simple, accessible and responsive navigation menu bar and side menu using TailwindCSS v3.0 and Alpine.js. For those of you who prefer a written tutorial, you can read it here:

Chapters:
0:00 Introduction: 
1:02 Project Setup
5:12 Header
15:57 Sidebar
25:18 Interaction + Accesability 
40:42 Ending

#tailwindcss #tailwind #alpinejs #alpine 

How To Create Responsive Side Navigation using TailwindCSS & AlpineJs

How To Create a Side Navigation with Tailwind CSS (Step by Step)

In this video, we are going to create a sidebar with tailwind CSS. Responsive Sidenav built with the latest Tailwind CSS. Sidebar navigation provides an easy way to navigate through many pages.

#css #tailwindcss #tailwind 

How To Create a Side Navigation with Tailwind CSS (Step by Step)