Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Courses for Front-End Web Developers

Convert the Chatbot to We-Wingit

[Tailwind](https://tailwindcss.com/) is an atomic CSS framework that makes styling an application more consistent and maintainable. In this lesson, we look at building out a similar UI to Twitter using only Tailwind classes.

Additionally, we use a heart icon from Feather Icons for our like button, and create a new `<GitHubButton />` component that displays a nicely styled GitHub logo to trigger the user authentication flow.

## Resources

- [Tailwind docs](https://tailwindcss.com/)
- [Feather Icons](https://feathericons.com/)
- [GitHub Logo](http://github.com/logos)

Style a Twitter clone with Tailwind CSS

SvelteKit is an application framework that builds on top of Svelte that provides you the app level functionality you need. It does the boring stuff that you don't want to so you can execute on the projects you want. 

As you build with SvelteKit, you'll find it continues the philosphy of Svelte by adhering to Web Standards and APIs. It builds on top of Web APIs so when you're develop SvelteKit sites you are also learning skills that will transfer to any web-based project

In this course, you will build a modern SvelteKit blog powered by Sanity CMS. You'll start from scratch and build out a site that dynamically generates pages that you create inside Sanity. 

As you build your blog, you will learn how to:

- Style Svelte components with TailwindCSS
- Add error pages to different routes
- Query your CMS in the front end
- Parse and validate your data with Zod and JSDoc
- Deploy both Sanity and your app to the web

The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Build a Sanity CMS Powered SvelteKit Blog

We will go through and add tailwind to our project and create a simple navbar. Tailwind is an incredibly easy to learn 'utility-first' css framework. 

Tailwind has a great CLI to help initialize the set up for use so that we don't have to create every config file by hand.

When you run `npx tailwindcss init tailsind.config.cjs -p` you'll have the proper postcss and tailwind config files create. 

We will then add the tailwind base styles to our global css and point tailwind to all the files we want it to process.

From there we'll get some practice in by building out a `<Navbar />` component that will have some basic styles applied.

Add TailwindCSS to a SvelteKit Project and Build a NavBar Component

We'll start our project by installing all of the necessary tools to get started with Web3 development. 

This project will use SvelteKit Tailwind CSS for it's UI. We have some handy initializers that we will run to do the configuration for us. 

On the Web3 side of things we will use Hardhat, Ethers.js, and hardhat-waffle for smart contract development.

Set up an Ethereum Project using SvelteKit with Tailwind CSS and Hardhat

We are starting from scratch! To create a new Next.js application we'll run `npx create-next-app` and pass in the `with-tailwindcss` flag to include Tailwind.

Then we will clear out the initial page and write in hello world.

Bootstrap a New Next.js Application with Tailwind using create-next-app

Remix is a full stack web framework that focuses on web standards and the server/client model so that you can develop the features your users want and need without being bogged down in over-abstractions. When you get good with Remix, you actually get good at the foundations of web development.

remix

There are many ways to style an application. While styling isn’t a focus for this course, we don’t want the application to be unbearable to look at. 


TailwindCSS is how you will style this application. With it’s utility classes, Tailwind stays out of the way once you get it set up. The [Tailwind docs have a great tutorial](https://tailwindcss.com/docs/guides/remix) which you can follow to get to styling your application. You can also follow along in this tutorial.

Set up Tailwind and Create a Presentational Component in Remix

Bite-size video tutorials for badass web developers.

egghead

Hey 👋, glad you're interested in my course about architecting a Digital Garden. Now there are a lot of buzzwords in this course 😅. Digital Garden, Next.js, Tailwind, Nx and more! And yes, we'll cover them all. We're not going to talk about Digital Gardens too much (there's a lot of material on Egghead on that already if you're curious), my goal is to teach you how to set up your own infrastructure to host one. 

That said, even though we're basically building a non-mission-critical personal platform for ourselves, all the technologies and skills you'll learn here, are 100% transferrable to your next professional project!

I really hope you like the course. Feel free to ping me [on Twitter](https://twitter.com/juristr) or on my [personal website](https://juri.dev) with questions and comments 🙂. Also, make sure to leave a review if you like the course!! 😄

Introduction to Architecting an Extensible Digital Garden with Next.js, Tailwind and Nx

We use the Message component we built in the very first video to render messages from the server's dummy data. Use some simple logic to conditionally render the message author's information. Learn how to tweak the line height of a paragraph of text.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-19-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-19-end)

Using Components to Dynamically Generate the Channel's Messages

Use Tailwind's responsive prefixes to apply specific classes only at certain breakpoints. Learn about two approaches for adjusting your UI for different screen sizes – sprinkling responsive prefixes on existing templates, or creating new chunks of markup to use at specific screen widths.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-21-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-21-end)

Using Responsive Design to Hide the Desktop Navigation

Let's round out our clone by replacing all static links with the mock data file, making sure the navigation works at every step.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-20-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-20-end)

Dynamically Generating the Server and Channel Navs

Add the @tailwindcss/forms plugin to ensure input fields are easily styleable using Tailwind's utility classes. Add the search bar and customize the placeholder to match Discord's UI.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-18-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-18-end)

Styling the Search Box Using the Forms Plugin

Learn how to use the flexbox-shrink utility to choose which parts of our multi-column layout shrink or expand to accommodate the available space. Use the truncate utility to add ellipses when the channel description is too long.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-17-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-17-end)

Building the Channel Header with Flexbox Shrink and Truncating Text

Use some simple React state to toggle categories open and closed. Filter out channels based on their unread and closed state. Use Tailwind's transform and transition utilities to animate a category's arrow to the right.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-16-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-16-end)

Building Collapsible Categories with Rotating Arrow Icons

Learn how to use a simple variable to improve the readability of our code when styling more than two states. Add an unread indicator to the new inactive and unread state. Use the active prefix to style the channel links for the active CSS pseudostate.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-15-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-15-end)

Using a State Variable to Add Unread States to the Channel Nav

Use nested dynamic router segments along with the Next.js Link Component to tie our channel links to new URLs. Learn why you should separate out UI states in order to avoid CSS conflicts.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-14-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-14-end)

Styling the Active Channel Link with a New Dynamic URL Segment

See how to dynamically generate our lists of channels using a React component and Tailwind's spacing utilities, and learn how this is often enough to reduce any duplication we have in our templates.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-13-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-13-end)

Identifying Repeated Patterns while Dynamically Generating the Channel List

Learn how to use the space, padding, and margin utilities to properly layout a list of items while styling the channel list. Use the group and hover utilities to add interactivity.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-12-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-12-end)

Styling the Channel List and Controlling Layout

To build the server header, we'll override Tailwind's default shadows with three values from Discord's design system. We'll also use the JIT compiler's bracket syntax to get a pixel-perfect match with Discord's UI. Arbitrary values are a powerful way to break out of your design system's values while still being able to use Tailwind's APIs directly in your HTML.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-11-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-11-end)

Building the Server Header using Arbitrary Values from the JIT Compiler

Reusing our custom server selector will result in lots of duplicate markup. Tailwind doesn't attempt to solve this duplication problem on its own, but instead encourages us to use whatever tools for code reuse we already have at our disposal. Let's make a NavLink React component to make our custom treatment easy to reuse and change.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-10-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-10-end)

Solving the Duplication Problem with Components

Let's build the active server indicator (the final piece of our server buttons) using an absolutely positioned div alongside Tailwind's position utilities. We'll then learn how to use Groups to affect the styling of the indicator when hovering over the ancestor link. Finally, we'll use the scale and translate utilities to add the final bit of polish and match Discord's UI.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-09-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-09-end)


Tailwind

Search Results