https://github.com/epicweb-dev/tailwindcss-color-tokens
Semantic, themable color design tokens in Tailwind CSS
https://github.com/epicweb-dev/tailwindcss-color-tokens
design tailwindcss tokens
Last synced: 2 months ago
JSON representation
Semantic, themable color design tokens in Tailwind CSS
- Host: GitHub
- URL: https://github.com/epicweb-dev/tailwindcss-color-tokens
- Owner: epicweb-dev
- License: other
- Created: 2024-07-10T06:22:44.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-12-05T05:08:19.000Z (7 months ago)
- Last Synced: 2025-04-01T10:35:44.296Z (3 months ago)
- Topics: design, tailwindcss, tokens
- Language: TypeScript
- Homepage: https://tailwindcss-color-tokens.epicweb.dev
- Size: 7.83 MB
- Stars: 24
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Tailwind CSS Color Tokens 🎨
Semantic, themable color design tokens in Tailwind CSS
In this workshop, we're going to define semantic color tokens in Tailwind CSS, to adhere to a convention set in a Figma design File.
We'll cover both Tailwind CSS v3 and v4 approaches 🔥
[![Build Status][build-badge]][build]
[![GPL 3.0 License][license-badge]][license]
[![Code of Conduct][coc-badge]][coc]
## Prerequisites
### Some experience with Tailwind CSS
This workshop is intended for developers who are already familiar with Tailwind
CSS.
If you’re not, great free resources to quickly up-skill are the official
[Tailwind docs](https://tailwindcss/com) and
[YouTube channel](https://youtube.com/tailwindlabs).
#### Some experience with JavaScript
Basic familiarity with
[JavaScript](https://kentcdodds.com/blog/javascript-to-know-for-react) and
[React](https://egghead.io/courses/the-beginner-s-guide-to-react) is also
beneficial, since we’ll be using a React + Vite app to build our UI.
Again, not critical as the workshops stays firmly focused on CSS.
## Pre-workshop Resources
Here are some resources you can read before taking the workshop to get you up to
speed on some of the tools and concepts we'll be covering:
- The
[From Zero to Production](https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0)
video series in particular is a great introduction to Tailwind, even if
designed for Tailwind v2.
## System Requirements
- [git][git] v2.18 or greater
- [NodeJS][node] v18 or greater
- [npm][npm] v8 or greater
All of these must be available in your `PATH`. To verify things are set up
properly, you can run this:
```shell
git --version
node --version
npm --version
```
If you have trouble with any of these, learn more about the PATH environment
variable and how to fix it here for [windows][win-path] or
[mac/linux][mac-path].
## Setup
This is a pretty large project (it's actually many apps in one) so it can take
several minutes to get everything set up the first time. Please have a strong
network connection before running the setup and grab a snack.
> **Warning**: This repo is _very_ large. Make sure you have a good internet
> connection before you start the setup process. The instructions below use
> `--depth` to limit the amount you download, but if you have a slow connection,
> or you pay for bandwidth, you may want to find a place with a better
> connection.
Follow these steps to get this set up:
```sh nonumber
git clone --depth 1 https://github.com/epicweb-dev/tailwindcss-color-tokens.git
cd tailwindcss-color-tokens
npm run setup
```
If you experience errors here, please open [an issue][issue] with as many
details as you can offer.
## The Workshop App
Learn all about the workshop app on the
[Epic Web Getting Started Guide](https://www.epicweb.dev/get-started).
[](https://www.epicweb.dev/get-started)
[npm]: https://www.npmjs.com/
[node]: https://nodejs.org
[git]: https://git-scm.com/
[build-badge]: https://img.shields.io/github/actions/workflow/status/epicweb-dev/tailwindcss-color-tokens/validate.yml?branch=main&logo=github&style=flat-square
[build]: https://github.com/epicweb-dev/tailwindcss-color-tokens/actions?query=workflow%3Avalidate
[license-badge]: https://img.shields.io/badge/license-GPL%203.0%20License-blue.svg?style=flat-square
[license]: https://github.com/epicweb-dev/tailwindcss-color-tokens/blob/main/LICENSE
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://kentcdodds.com/conduct
[win-path]: https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/
[mac-path]: http://stackoverflow.com/a/24322978/971592
[issue]: https://github.com/epicweb-dev/tailwindcss-color-tokens/issues/new