Tailwind CSS Color Tokens

Simon Vrachliotis

Learn about the role that semantic design tokens play in mature design systems.

Introduction to Tailwind CSS Color Tokens

Introduction

In this exercise, you'll recreate a design from Figma using Tailwind. 

Intro

Recreate a design in Figma using Tailwind as precisely as possible on both mobile and desktop.

Use Tailwind with CSS Grid classes to re-create a design from Figma pixel by pixel.

Design Implementation

Figma to Tailwind CSS

Implement custom colors from a Figma design into a Tailwind project. Starting with the raw colors first and then an abstraction for semantic color tokens.

Extend your Tailwind theme with the 14 raw colors from the Figma design and update the UI to use them.

Extend your Tailwind theme with color tokens and then style your app based on the colors from a Figma design using them.

Custom colors in UI

Cutoff Tailwind's default colors by defining all of the colors directly in theme.colors and override everything else.

Cutoff Default Colors

Overriding Tailwind's color classes got rid of the "non-colors" such as -inherit, -current, and -transparent. Let's add them back!

Add Tailwind's non-colors back by simply adding them to theme.colors before the custom colors.

"Non colors" support

Having all of your color tokens available globally can lead to design problems. Instead, scope your colors to specific use-cases such as background or text.

Create a bespoke design system in Tailwind by extending the Tailwind theme with semantic design tokens for different contexts.

Semantic Design Tokens

When overriding colors it's easy to wipe out most of Tailwind's core color plugins. Your challenge is to extend your theme with a few missing plugins.

Abstract your semantic design tokens into constants and then reference them in theme.extend for the various core color plugins in Tailwind.

Broader Scopes

Make your design themeable! Move your colors from the Tailwind config into CSS Variables and then consume those variables in the config.

Move your colors and semantic tokens in Tailwind config to CSS Variables using HSL strings to make your colors changeable at runtime.

CSS Variables

Support enabling dark mode support in your tailwind project with just a single class.

Dark Mode

Multi-Theme Support

Color Design Tokens Outro

Color Design Tokens

Conversion to Tailwind v4 Introduction

Theme Configuration in CSS

Simplification

Conversion to Tailwind v4 Outro

Conversion to Tailwind v4

Tailwind CSS Color Tokens Outro

Outro

Chantastic

In this tutorial, you'll elevate your Git skills, learning from mistakes and unearthing lesser-known tricks that will help you in your everyday life as a developer.

Intro to Git Fundamentals

Improve your daily Git usage by learning essential help commands, including tutorials and subcommand instructions for a smoother workflow.

Git Help Options

Learn how to use the git init command to create and initialize new git repositories, and explore the hidden .git directory.

Creating a Git Repository with `git init`

Learn how to use git status command to view repository information, track and commit changes, and understand the importance of the .git directory.

Git Status and the Hidden .git Directory

Learn the basics of working with Git like tracking files, understanding the status, and staging changes for commit.

Git Tracking and Staging Files

Learn how to manage the staging area before creating a commit by utilizing the git reset command to exclude files and changes.

Using `git reset` to Refine Your Staging Area

Learn how to configure Git with your user information so it shows up in your commits.

Setting Up Git Configuration for Commits

Learn how to manage your code with git by committing changes, staging files, and checking the status of your working tree.

Understanding Git Commit, Add, and Status

Discover how to inspect and navigate through git commit history using `git show` and various arguments, such as commit SHA and aliases.

Inspecting Commit History with `git show`

Learn how to efficiently add, reset, and amend git commit messages with a step-by-step exercise on staging and committing changes.

Interactive Git Staging

Learn how to customize the git log output to display concise and relevant commit information. We'll be using different flags and config settings to achieve the perfect git commit overview.

Optimizing Git Log Output for Better Workflow

Learn how to synchronize local and remote repositories on GitHub, along with understanding the usage of git remote, git branch, and git push commands for seamless collaboration.

Syncing Local and Remote Git Repositories with GitHub

Learn how to use Git push to sync your local commits to a remote repository, ensuring your code stays up-to-date across platforms.

Syncing Local Commits with Remote Repository

Learn the importance of syncing your remote commits to your local repository using Git and how to do it by running the git pull command.

Syncing Remote Commits to Local Repository

Learn about the two underlying commands of Git Pull, Git Fetch and Git Merge, and how they are used to update your local and remote branches.

Keeping Branches Updated

Learn how to create, switch, and merge branches in Git, and see how to sync them with your remote repository in GitHub for effective collaboration.

Branch Management and Syncing with Git and GitHub

Take a moment to feel proud of completing this Git course and get ready to explore more tutorials and workshops on Epic web!

Concluding the Git Fundamentals Tutorial

Commands

Git Fundamentals

Kent C. Dodds

The goal of this tutorial is to develop a mindset that is universally applicable to any AI tool you use.

Introduction to Developing with AI Assistants

Adding custom instructions to ChatGPT is a great way to personalize its responses.

Custom Instructions in ChatGPT

Conversing with an AI assistant can help you make informed decisions about your technical stack.

Making Technical Decisions with AI

An AI assistant can help you explore unfamiliar topics and guide you in the right direction.

Exploring Unfamiliar Topics with ChatGPT

Install GitHub Copilot

Using AI assistants like GitHub Copilot can be a game-changer when it comes to writing tests for your code.

Writing Tests with GitHub Copilot

Generate realistic test data effortlessly for efficient database seeding with the help of your AI assistant.

Realistic Database Seeding with AI

Prompt AI for fetch request code, address issues, and optimize development tasks seamlessly.

Simplify API Interaction with AI Assistants

Gain insights, explanations, and bug identification with AI assistants, streamlining your understanding in your codebase.

Understanding Code with AI

Quickly grasp and navigate APIs with your AI assistant. Learn to filter errors, such as Chrome extensions in Sentry, with ease. Verify solutions for accuracy.

Navigating APIs Documentation with AI

Paste error messages into AI chat for quick potential causes and troubleshooting steps, expediting the debugging process

AI-Driven Debugging - Deciphering Errors

Describe in English, let AI generate SQL. Simplify database interactions.

AI-Simplified SQL Queries

Automate git commits with AI. Paste your diff, streamline version control.

Simplifying Git Commit Messages

Explore how AI aids in decoding slang, understanding emojis, and strategizing responses, making social media interactions more informed and strategic.

AI Assistants for Social Media Dynamics

Gain insights into the role of AI assistants in web development. Exciting possibilities await as these tools evolve for more efficient and creative projects.

Concluding AI Assistance for Web Developers

Real World Examples

AI Assistants

Recreate an interactive cards UI with Tailwind CSS.

Fluid Hover Cards with Tailwind CSS

Understanding how to employ Flexbox for crafting fluid, horizontally adaptable UIs with reusable elements.

Overview of the Cards Grid

JavaScript's Array methods provide a quick way to create a list of items.

Use a Loop to Quickly Create a List

A step-by-step guide on how to fetch and display images dynamically in a gallery.

DynamicallyAdd Images to the Cards

Positioning and Styling Text in Cards

Adding a background gradient can enhance the readability of text laid over vibrant images.

Enhance Text Readability with a Gradient

By adding some classes to the cards, we can hide and reveal text on hover.

Hide and Reveal Text on Hover

Learn a CSS Grid technique to animate elements from zero to their full height on hover.

Use CSS Grid to Animate Elements with Dynamic Height

Add an interactive hover effect that changes the opacity of text.

Animate Text Opacity

Update the effect so the hovered card expands and the other cards shrink using Flexbox.

Animate A Card's Width on Hover with Flexbox

Setting a fixed width for card text will prevent line break jumps when the card expands and contracts.

Prevent Line Break Jumps with Fixed Widths

This was an iterative process, but there are two main takeaways that you should keep in mind when working on your own projects.

Concluding the Fluid Hover Cards Tutorial

Implementation

Learn how to deploy a Node.js application that persists data to multiple regions.

Intro to Deploy Distributed Apps with Node.js & Fly

Fly.io is the service we'll use for deploying our app. The first step is signing up for an account. 

Signing Up for Fly.io

We will deploy to Fly with Docker. A Dockerfile is used to tell Docker the steps to take to run our app.

Setting Up Docker

With the Dockerfile ready to go, let's deploy our app to Fly.

Deploying to Fly with Docker

Fly.io

Project Setup and First Deployment

Currently the counter state is reset to zero after every deployment. Creating a persistent volume with Fly solves this problem.

Persist Application Data Between Deployments

While not a replacement for testing, Fly offers health checks to prevent broken code from being deployed.

Adding Deployment Health Checks

Fly allows you to SSH into your app's virtual machine and run commands. Updating the Dockerfile to create a shortcut script makes the process run more smoothly.

Add a SQLite Console Shortcut with the Dockerfile

Configure GitHub Actions for Automatic Deployment

A staging environment is useful for play testing before pushing changes to production. This can be quickly set up with GitHub Actions and Fly

Add a Staging Environment

Persisting Data and Automatic Deployment

Deploying sites to multiple regions is less of a challenge than handling data. Fortunately Fly makes it easy to prepare for multi-region data.

Prepare for Multi-Region Data with LiteFS

If you're migrating to LiteFS from an existing application, you may have data you'd like to keep. Luckily, there's an easy process for importing it into LiteFS.

Import Existing Data into LiteFS

The Consul lease type provides a resilient solution in case the primary instance of our application goes down.

Set Up the Consul Lease Type

In order to make sure only our primary region attempts to write data, we'll set up a proxy server configuration for LiteFS

Set Up a Proxy Server for Multi-Region Database Support

With all the setup in place, it's time to scale our deployment to multiple regions, and test to confirm it's working as expected.

Free Web Development Tutorials

A collection of exercise-driven, in-depth Web Development tutorials.

Tailwind CSS Color Tokens

Git Fundamentals

AI Assistants

Fluid Hover Cards with Tailwind CSS

Deploy Web Applications All Over the World

Follow EpicWeb.dev