npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mariohamann/tailwindcss-var

v2.1.0

Published

This plugin allows to create and use scoped CSS variables for colors and spacings in your Tailwind CSS project.

Downloads

263

Readme

tailwindcss-var

This plugin allows to create and use scoped CSS variables for colors and spacings in your Tailwind CSS project.

For live-examples check out mariohamann.de/tailwindcss-var.

Please read ❤️

  • ⚠️ This plugin expects you to use Tailwind CSS >2.0 || >3.0 with JIT mode enabled. (Tested with >3.3)
  • Although this plugin has version "2.x", this is still beta. (I switched to 1.x to mark breaking changes). Please be aware of changes in future. Neverthessless it's already tested in production and works well.
  • The plugin works out of the box with default color variations of Tailwind CSS (50, 100, ..., 800, 900). If you want to use other variable variations, you'll find some basic instructions below.

Migration from 1.x

  • The plugin now uses "var" as a prefix instead of de dollar sign. (e. g. $color -> varcolor), as the TailwindCSS parser had problems parsing the dollar sign in Versions >3.1. (I tried lots different ways to escape the dollar sign, but none of them worked. If you have a solution, please let me know. :))
  • The plugin now extends your theme per default. You only have to manually extend your theme, if your color definitions are different from the default ones. (See Modify color variables below.)

Installation

  1. Add package to your project e. g. npm install @mariohamann/tailwindcss-var.

  2. Add the plugin to your tailwind.config.js with require('@mariohamann/tailwindcss-var').

  3. Per default the included variables match Tailwind's default color sets (50–950). If you're using different sets, change the variables as described below:

  4. To test if everything works, add the following classes to an object with text varcolor-indigo text-varcolor-500.

Examples

Example 1: Basic color change

  1. Define your object once with text-varcolor-600, bg-varcolor-50 etc.
  2. Fill the variable (dynamically) with e. g. varcolor-pink.
  3. text-varcolor-600 renders as text-pink-600, bg-varcolor-50 renders as bg-pink-50.

Try it yourself: https://play.tailwindcss.com/BqEnApCXDd.

basic color change code example (The image shows an older version of the plugin. The new version uses "var" as a prefix instead of the dollar sign.)

Example 2: Hierarchy and subvalues

  • Variables are automatically consumable by every child element.
  • You can overwrite variables in every child.
  • You can overwrite single variants of the variable with other colors or opacities.

Try it yourself: https://play.tailwindcss.com/19SLgiXbMN

hierarchy and subvalues code example

Example 3: Sizes

  • Besides color variables you can set variables for spacings.
  • You can use the variables for width, height, margins etc.
  • Since version 2.1.0 you can use the variables for fontSize, too.

Try it yourself: https://play.tailwindcss.com/70ezDS1hIy

size code example

Example 4: Arbitrary values

  • You can set and use arbitrary values for both spacings and colors.
  • In the example height and roundedness resize perfectly with the width of the object.

Try it yourself: https://play.tailwindcss.com/0r55inbvBq

arbitrary values example

Modify color variables

Out of the box, the plugin extends your theme with the following color and spacing.

{
  theme: {
    extend: {
      colors: {
        'varcolor': {
          50: 'var(--tw-varcolor-50)',
          100: 'var(--tw-varcolor-100)',
          200: 'var(--tw-varcolor-200)',
          300: 'var(--tw-varcolor-300)',
          400: 'var(--tw-varcolor-400)',
          500: 'var(--tw-varcolor-500)',
          600: 'var(--tw-varcolor-600)',
          700: 'var(--tw-varcolor-700)',
          800: 'var(--tw-varcolor-800)',
          900: 'var(--tw-varcolor-900)',
        },
      },
      spacing: {
        'varspacing': 'var(--tw-varspacing)',
      },
    },
  }
}

If you have other color definitions which you want to use with variables, just change the varcolor-definitions in your theme e. g.:

{
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#FF88DD',
          dark: '#FFFF00',
        }
        secondary: {
          light: 'FF88FF',
          dark: '#FF00FF',
        }
        'varcolor': {
          light: 'var(--tw-varcolor-light)',
          dark: 'var(--tw-varcolor-dark)',
        },
      },
    },
  }
}