Tailwind CSS Colors

tailwindcss-colors

By Paulina Kalicka

A package that provides TailwindCSS's default color palette as hex color codes for quick access.

colors

hex

tailwindcss

Paste this command in a terminal to install the package

espanso install tailwindcss-colors

Description

Source

`tailwindcss-colors`

An Espanso package that provides TailwindCSS's default color palette as hex color codes. This package is perfect for those who want quick access to TailwindCSS's hex color codes without needing to look them up in the documentation.

Features

Integrates smoothly with Espanso.
Outputs color hex codes of default TailwindCSS colors (e.g.,
#3B82F6
for
blue-500
).
Provides simple triggers for fast and efficient use.

Installation

Ensure you have Espanso installed on your system.
Install the
tailwindcss-colors
package:

espanso install tailwindcss-colors

Usage

The triggers follow a straightforward pattern:

:<color_name>-<shade>

. Simply type the trigger to insert the corresponding TailwindCSS hex color codes into your text. Here are a few examples:

Trigger

Output

:blue-500

#3B82F6

:gray-300

#D1D5DB

:red-700

#B91C1C

:yellow-400

#FACC15

To explore the full range of TailwindCSS colors and their hex color codes, check out the official TailwindCSS color documentation.

Uninstalling

If you no longer need the

tailwindcss-colors

package, you can remove it easily:

espanso uninstall tailwindcss-colors

package.yml

matches:
  - trigger: ":slate50"
    replace: "#f8fafc"
  - trigger: ":slate100"
    replace: "#f1f5f9"
  - trigger: ":slate200"
    replace: "#e2e8f0"
  - trigger: ":slate300"
    replace: "#cbd5e1"
  - trigger: ":slate400"
    replace: "#94a3b8"
  - trigger: ":slate500"
    replace: "#64748b"
  - trigger: ":slate600"
    replace: "#475569"
  - trigger: ":slate700"
    replace: "#334155"
  - trigger: ":slate800"
    replace: "#1e293b"
  - trigger: ":slate900"
    replace: "#0f172a"
  - trigger: ":slate950"
    replace: "#020617"

  - trigger: ":gray50"
    replace: "#f9fafb"
  - trigger: ":gray100"
    replace: "#f3f4f6"
  - trigger: ":gray200"
    replace: "#e5e7eb"
  - trigger: ":gray300"
    replace: "#d1d5db"
  - trigger: ":gray400"
    replace: "#9ca3af"
  - trigger: ":gray500"
    replace: "#6b7280"
  - trigger: ":gray600"
    replace: "#4b5563"
  - trigger: ":gray700"
    replace: "#374151"
  - trigger: ":gray800"
    replace: "#1f2937"
  - trigger: ":gray900"
    replace: "#111827"
  - trigger: ":gray950"
    replace: "#030712"

  - trigger: ":zinc50"
    replace: "#fafafa"
  - trigger: ":zinc100"
    replace: "#f4f4f5"
  - trigger: ":zinc200"
    replace: "#e4e4e7"
  - trigger: ":zinc300"
    replace: "#d4d4d8"
  - trigger: ":zinc400"
    replace: "#a1a1aa"
  - trigger: ":zinc500"
    replace: "#71717a"
  - trigger: ":zinc600"
    replace: "#52525b"
  - trigger: ":zinc700"
    replace: "#3f3f46"
  - trigger: ":zinc800"
    replace: "#27272a"
  - trigger: ":zinc900"
    replace: "#18181b"
  - trigger: ":zinc950"
    replace: "#09090b"

  - trigger: ":neutral50"
    replace: "#fafafa"
  - trigger: ":neutral100"
    replace: "#f5f5f5"
  - trigger: ":neutral200"
    replace: "#e5e5e5"
  - trigger: ":neutral300"
    replace: "#d4d4d4"
  - trigger: ":neutral400"
    replace: "#a3a3a3"
  - trigger: ":neutral500"
    replace: "#737373"
  - trigger: ":neutral600"
    replace: "#525252"
  - trigger: ":neutral700"
    replace: "#404040"
  - trigger: ":neutral800"
    replace: "#262626"
  - trigger: ":neutral900"
    replace: "#171717"
  - trigger: ":neutral950"
    replace: "#0a0a0a"

  - trigger: ":stone50"
    replace: "#fafaf9"
  - trigger: ":stone100"
    replace: "#f5f5f4"
  - trigger: ":stone200"
    replace: "#e7e5e4"
  - trigger: ":stone300"

Made with