Easily create css variables without the need for a css file!

  • By Mert Aşan
  • Last update: Dec 22, 2022
  • Comments: 13

Tests Examples npm license

Tailwind CSS Variables

This plugin allows you to configure CSS variables in the tailwind.config.js

Similar to the tailwindcss configurations you are used to. It is also possible to define a different group of variables for Dark Mode. Alternatively, it has an API that you can use for your own plugins.

Highlights

  • Variables are as easy as defining tailwindcss colors...
  • You can designate the variables to :root or custom CSS selectors.
  • Variables can be formed through using nested object notation.
  • Different variables can be composed for the Dark Mode.
  • Dark Mode variables are set automatically through the class or media modes on your configuration.
  • If darkMode config are set as class, custom dark selector can be defined.
  • It allows you to add custom themes while creating your own plugin via the plugin API.
  • Prefix can be defined for variables. (It is useful when using the plugin API)
  • You can configure your own needs such as multi-themes without needing an additional plugin!

Documentation

Language Documentation link
English Documentation
Turkish Dökümantasyon

Version Compatibility

Tailwind CSS Package
2.x 1.x
3.x 2.x

Installation

npm install -D @mertasan/tailwindcss-variables

Playground

Simple example: https://play.tailwindcss.com/hCpcvnGsPx?file=config

Usage

// tailwind.config.js

module.exports = {
  theme: {
    colors: {
        red: {
            50: 'var(--colors-red-50)'
        }
    }
    variables: {
      DEFAULT: {
        sizes: {
          small: '1rem',
          button: {
            size: '2rem'
          }
        },
        colors: {
          red: {
            50: '#ff3232',
          },
        },
      },
      '.container': {
        sizes: {
          medium: '1.5rem',
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')
  ]
}

Output:

:root {
  --sizes-small: 1rem;
  --sizes-button-size: 2rem;
  --colors-red-50: #ff3232
}

.container {
  --sizes-medium: 1.5rem
}

Dark Mode

with the class mode

// tailwind.config.js

module.exports = {

  darkMode: 'class',

  theme: {
    variables: {
      DEFAULT: {
        sizes: {
          small: '1rem',
        },
        colors: {
          red: {
            50: 'red',
          },
        },
      },
      '.container': {
        colors: {
          red: {
            50: 'indigo',
          },
        },
      },
    },
    darkVariables: {
      DEFAULT: {
        colors: {
          red: {
            50: 'blue',
          },
        },
      },
      '.container': {
        colors: {
          red: {
            50: 'green',
          },
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')
  ]
}

Output:

:root {
  --sizes-small: 1rem;
  --colors-red-50: red
}

.container {
  --colors-red-50: indigo
}

:root.dark {
  --colors-red-50: blue
}

:root.dark .container {
  --colors-red-50: green
}

with the darkToRoot and darkSelector configurations

If the darkModeconfiguration is set as 'class' in your tailwindcss configuration, you can change and customize the darkToRoot and darkSelector settings.

Option Type Default Description
darkSelector string .dark CSS selector used for Dark mode.
darkToRoot bool true Does the selector defined asdarkSelector being used as :root ? 
// tailwind.config.js

module.exports = {

  darkMode: 'class',

  theme: {
    variables: {
      DEFAULT: {
        sizes: {
          small: '1rem',
        },
        colors: {
          red: {
            50: 'red',
          },
        },
      },
      '.container': {
        colors: {
          red: {
            50: 'indigo',
          },
        },
      },
    },
    darkVariables: {
      DEFAULT: {
        colors: {
          red: {
            50: 'blue',
          },
        },
      },
      '.container': {
        colors: {
          red: {
            50: 'green',
          },
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')({
      darkToRoot: false,
      darkSelector: '.custom-dark-selector',
    })
  ]
}

Output:

:root {
    --sizes-small: 1rem;
    --colors-red-50: red
}

.container {
    --colors-red-50: indigo
}

.custom-dark-selector {
    --colors-red-50: blue
}

.custom-dark-selector .container {
    --colors-red-50: green
}

with the media mode

// tailwind.config.js

module.exports = {

  darkMode: 'media',

  theme: {
    variables: {
      DEFAULT: {
        sizes: {
          small: '1rem',
        },
        colors: {
          red: {
            50: 'red',
          },
        },
      },
      '.container': {
        colors: {
          red: {
            50: 'indigo',
          },
        },
      },
    },
    darkVariables: {
      DEFAULT: {
        colors: {
          red: {
            50: 'blue',
          },
        },
      },
      '.container': {
        colors: {
          red: {
            50: 'green',
          },
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')
  ]
}

Output:

:root {
  --sizes-small: 1rem;
  --colors-red-50: red
}

.container {
    --colors-red-50: indigo
}

@media (prefers-color-scheme: dark) {
  :root {
    --colors-red-50: blue
  }

  .container {
    --colors-red-50: green
  }
}

Prefix

// tailwind.config.js

module.exports = {
  theme: {
    variables: {
      DEFAULT: {
        sizes: {
          small: '1rem',
          button: {
            size: '2rem'
          }
        },
        colors: {
          red: {
            50: '#ff3232',
          },
        },
      },
      '.container': {
        sizes: {
          medium: '1.5rem',
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')({
      variablePrefix: '--admin'
    })
  ]
}

Output:

:root {
  --admin-sizes-small: 1rem;
  --admin-sizes-button-size: 2rem;
  --admin-colors-red-50: #ff3232
}

.container {
    --admin-sizes-medium: 1.5rem
}

Nested object notation

// tailwind.config.js

module.exports = {
  theme: {
    variables: {
      DEFAULT: {
        sizes: {
          DEFAULT: '1px',
          small: '1rem',
          admin: {
            DEFAULT: '2px',
            buttons: {
              colors: {
                red: {
                  DEFAULT: '#ffffff',
                  500: '#ff0000',
                  600: '#e60000',
                }
              }
            }
          }
        },
      }
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')
  ]
}
:root {
  --sizes: 1px;
  --sizes-small: 1rem;
  --sizes-admin: 2px;
  --sizes-admin-buttons-colors-red-500: #ff0000;
  --sizes-admin-buttons-colors-red-600: #e60000;
  --sizes-admin-buttons-colors-red: #ffffff
}

Rules for keys of variables

Variable keys can only include designated characters. Other characters will be automatically removed. Because using underscores (_) on objects is allowed, underscores will be transformed into middle dashes (-).

Rule:

/[^a-z0-9\-]+/gi
Before After
hello[$&+,:;[email protected]#'<>.-^*()%!]world hello-world
hello__world hello-world
css_variables_for-tailwindcss css-variables-for-tailwindcss

Here's an example:

// tailwind.config.js

module.exports = {
  theme: {
    variables: {
      DEFAULT: {
        colors: {
          'hello[$&+,:;[email protected]#|\'<>.-^*()%!]world': '100%',
          underscore_to_dash: '100%',
          'underscore_to_dash-with-dash': '100%',
          auto_dash: '100%',
        },
      },
      '[type=\'button\']': {
        'hello[$&+,:;[email protected]#|\'<>.-^*()%!]world': '100%',
        underscore_to_dash: '100%',
        'underscore_to_dash-with-dash': '100%',
        auto_dash: '100%',
        nested_auto_dash: {
          color_primary: '100%',
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')
  ]
}

Output:

:root {
  --colors-hello-world: 100%;
  --colors-underscore-to-dash: 100%;
  --colors-underscore-to-dash-with-dash: 100%;
  --colors-auto-dash: 100%
}

[type='button'] {
  --hello-world: 100%;
  --underscore-to-dash: 100%;
  --underscore-to-dash-with-dash: 100%;
  --auto-dash: 100%;
  --nested-auto-dash-color-primary: 100%
}

Helpers

colorVariable()

You can use the colorVariable helper to add text-opacity or bg-opacity to the variables for which colors are defined.

// tailwind.config.js

const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')

module.exports = {
  theme: {
    screens: false,
    colors: {
      primary: colorVariable('--colors-primary'), // HEX (3 digits)
      secondary: colorVariable('var(--colors-secondary)'), // HEX (6 digits)
      white: '#ffffff', // no variable
      blue: colorVariable('var(--colors-blue)'), // RGB
      red: {
        400: colorVariable('var(--colors-red-400)'), // RGBA
        500: colorVariable('var(--colors-red-500)'), // RGBA
        600: 'var(--colors-red-500)', // RGBA (without using colorVariable() helper)
      },
      gray: 'var(--colors-gray)', // HEX (6 digits) (without using colorVariable() helper)
      green: 'var(--colors-green)', // RGB (without using colorVariable() helper)
    },
    variables: {
      DEFAULT: {
        colors: {
          primary: '#ff0',
          secondary: '#000000',
          gray: '#6B7280',
          blue: 'rgb(0,0,254)',
          red: {
            400: 'rgba(254,0,0,0.5)',
            500: 'rgba(254,0,0,1)',
          },
          green: 'rgb(0,255,0)',
        },
        sizes: {
          small: '10px',
          medium: '2rem',
          large: '100%',
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')({
      colorVariables: true
    })
  ]
}

Purge:

<div class="text-primary text-opacity-50"></div>
<div class="bg-secondary bg-opacity-50"></div>
<div class="bg-gray bg-opacity-50"></div>
<div class="text-blue text-opacity-50"></div>
<div class="bg-red-400"></div>
<div class="bg-red-500"></div>
<div class="bg-red-600"></div>
<div class="bg-green bg-opacity-50"></div>
<div class="bg-white bg-opacity-50"></div>

Output:

:root {
  --colors-primary: #ff0;
  --colors-secondary: #000000;
  --colors-gray: #6B7280;
  --colors-blue: rgb(0,0,254);
  --colors-red-400: rgba(254,0,0,0.5);
  --colors-red-500: rgba(254,0,0,1);
  --colors-red-400-rgb: 254,0,0;
  --colors-red-500-rgb: 254,0,0;
  --colors-green: rgb(0,255,0);
  --colors-primary-rgb: 255,255,0;
  --colors-secondary-rgb: 0,0,0;
  --colors-gray-rgb: 107,114,128;
  --colors-blue-rgb: 0,0,254;
  --colors-green-rgb: 0,255,0;
  --sizes-small: 10px;
  --sizes-medium: 2rem;
  --sizes-large: 100%
}

.text-primary {
 --tw-text-opacity: 1;
 color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
}

.text-blue {
 --tw-text-opacity: 1;
 color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
}

.text-opacity-50 {
 --tw-text-opacity: 0.5
}

.bg-secondary {
 --tw-bg-opacity: 1;
 background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
}

.bg-white {
 --tw-bg-opacity: 1;
 background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
}

.bg-red-400 {
 --tw-bg-opacity: 1;
 background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
}

.bg-red-500 {
 --tw-bg-opacity: 1;
 background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
}

.bg-red-600 {
  background-color: var(--colors-red-500)
}

.bg-gray {
 background-color: var(--colors-gray)
}

.bg-green {
 background-color: var(--colors-green)
}

.bg-opacity-50 {
 --tw-bg-opacity: 0.5
}

forceRGB

If forceRGB is set to true, no additional variables are created.

Before

// tailwind.config.js

const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')

module.exports = {
  theme: {
    screens: false,
    colors: {
      green: colorVariable('var(--colors-green)'),
    },
    variables: {
      DEFAULT: {
        colors: {
          green: '#11ff00',
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')({
      colorVariables: true,
    })
  ]
}

Output:

:root {
  --colors-green: #11ff00;
  --colors-green-rgb: 17,255,0
}

.text-green {
  --tw-text-opacity: 1;
  color: rgba(var(--colors-green-rgb), var(--tw-text-opacity))
}

After

// tailwind.config.js

const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')

module.exports = {
  theme: {
    screens: false,
    colors: {
      green: colorVariable('var(--colors-green)', true),
    },
    variables: {
      DEFAULT: {
        colors: {
          green: '#11ff00',
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')({
      colorVariables: true,
      forceRGB: true,
    })
  ]
}

Output:

:root {
  --colors-green: 17,255,0;
}

.text-green {
  --tw-text-opacity: 1;
  color: rgba(var(--colors-green), var(--tw-text-opacity))
}

extendColors for colorVariable

Instead of using each of the colors between the variables as colorVariable('var(--colors-red)'), You can define colors in the extendColors option.

Example:

// tailwind.config.js

module.exports = {
  theme: {
    screens: false,
    colors: {
      white: '#fff',
      green: 'var(--colors-green)',
    },
    variables: {
      DEFAULT: {
        colors: {
          blue: '#0065ff',
          red: '#ff0000',
          green: '#11ff00',
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')({
      colorVariables: true,
      extendColors: {
        blue: 'var(--colors-blue)',
        red: 'var(--colors-red)',
      }
    })
  ]
}

Output:

:root {
  --colors-blue: #0065ff;
  --colors-red: #ff0000;
  --colors-green: #11ff00;
  --colors-blue-rgb: 0,101,255;
  --colors-red-rgb: 255,0,0;
  --colors-green-rgb: 17,255,0
}

.text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity))
}

.text-green {
  color: var(--colors-green)
}

.text-blue {
  --tw-text-opacity: 1;
  color: rgba(var(--colors-blue-rgb), var(--tw-text-opacity))
}

.text-red {
  --tw-text-opacity: 1;
  color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))
}

.text-opacity-50 {
  --tw-text-opacity: 0.5
}

Example 2 - Using with forceRGB:

// tailwind.config.js

module.exports = {
  theme: {
    screens: false,
    colors: {
      white: '#fff',
      green: 'var(--colors-green)',
    },
    variables: {
      DEFAULT: {
        colors: {
          blue: '#0065ff',
          red: '#ff0000',
          green: '#11ff00',
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')({
      colorVariables: true,
      forceRGB: true,
      extendColors: {
        blue: 'var(--colors-blue)',
        red: 'var(--colors-red)',
      }
    })
  ]
}

Output:

:root {
  --colors-blue: 0,101,255;
  --colors-red: 255,0,0;
  --colors-green: 17,255,0
}

.text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity))
}

.text-green {
  color: var(--colors-green)
}

.text-blue {
  --tw-text-opacity: 1;
  color: rgba(var(--colors-blue), var(--tw-text-opacity))
}

.text-red {
  --tw-text-opacity: 1;
  color: rgba(var(--colors-red), var(--tw-text-opacity))
}

.text-opacity-50 {
  --tw-text-opacity: 0.5
}

API example for your own plugins

// tailwind.config.js
const plugin = require('tailwindcss/plugin')
const variablesApi = require('@mertasan/tailwindcss-variables/api')

let variableOptions = {
  variablePrefix: '--myplugin'
}

const pluginVariables = {
  DEFAULT: {
    colors: {
      primary: 'black',
      secondary: 'white',
      warning: 'orange',
    },
  },
}

const pluginDarkVariables = {
  DEFAULT: {
    colors: {
      primary: 'red',
      secondary: 'yellow',
      warning: 'green',
    },
  },
}

module.exports = {
  plugins: [
    plugin(function({ addComponents, config }) {

      addComponents(variablesApi.variables(pluginVariables, variableOptions))

      addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class

    })
  ]
}

Output:

:root {
  --myplugin-colors-primary: black;
  --myplugin-colors-secondary: white;
  --myplugin-colors-warning: orange
}

:root.dark {
  --myplugin-colors-primary: red;
  --myplugin-colors-secondary: yellow;
  --myplugin-colors-warning: green
}

API component helper

You can also use tailwindcss-variables plugin API to register your components.

// tailwind.config.js
const plugin = require('tailwindcss/plugin')
const variablesApi = require('@mertasan/tailwindcss-variables/api')

let variableOptions = {
  variablePrefix: '--myplugin'
}

const pluginVariables = {
  DEFAULT: {
    colors: {
      primary: 'black',
      secondary: 'white',
      warning: 'orange',
    },
  },
}

const pluginDarkVariables = {
  DEFAULT: {
    colors: {
      primary: 'red',
      secondary: 'yellow',
      warning: 'green',
    },
  },
}

module.exports = {
  plugins: [
    plugin(function({ addComponents, config }) {
      const formComponents = {
        select: {
          DEFAULT: {
            backgroundColor: 'var(--myplugin-colors-primary)',
          },
          multi: {
            '&.default-multi': {
              backgroundColor: 'var(--myplugin-colors-secondary)',
            },
            '&.other-multi': {
              backgroundColor: 'var(--myplugin-colors-warning)',
            },
          },
        },
      }

      addComponents(variablesApi.variables(pluginVariables, variableOptions))

      addComponents(variablesApi.darkVariables(pluginDarkVariables, variableOptions, config('darkMode'))) // darkMode: class

      // Automatically register components via API.
      addComponents(variablesApi.getComponents('.form', formComponents))
    })
  ]
}

Output:

:root {
  --myplugin-colors-primary: black;
  --myplugin-colors-secondary: white;
  --myplugin-colors-warning: orange;
}

:root.dark {
  --myplugin-colors-primary: red;
  --myplugin-colors-secondary: yellow;
  --myplugin-colors-warning: green;
}

.form-select {
    background-color: var(--myplugin-colors-primary);
}

.form-select.default-multi {
    background-color: var(--myplugin-colors-secondary);
}

.form-select.other-multi {
    background-color: var(--myplugin-colors-warning);
}

Detailed example of the API

What are the advantages?

Imagine you are creating a form builder (PHP) package for Laravel. In this case, I am sure there will be a lot of styles to customize. Nonetheless, one of the most necessary things is the colors! You'll develop the components with the colors you pick out. Of course these colors can be customized with the vendor:publish command but you can make it simpler for everyone. Users can customize the colors for their own likings and if they wish they can also configure your plugin for the dark mode as well. This way, users don't have to alter the .css or .blade.php files for some small and simple customizations. Thus, they can use your package with up to date components and can adapt to future version updates. If you have read this statement, it means that now you know why this plugin came about. :)

What are the disadvantages?

If you have any ideas, please don't refrain to send a PR.

Resources on this example:

Your own plugin themes:

// myplugin/themes.js
module.exports = (theme) => ({
  themes: {
    DEFAULT: {
      colors: {
        primary: 'black',
        secondary: 'white',
        warning: 'orange',
      },
    }
  }
})

Your own plugin components:

// myplugin/components.js
module.exports = (theme) => ({
  select: {
    DEFAULT: {
      backgroundColor: 'var(--forms-colors-primary)',
    },
    multi: {
      '.default-multi': {
        backgroundColor: 'var(--forms-colors-secondary)',
      },
      '.other-multi': {
        backgroundColor: 'var(--forms-colors-warning)',
      },
    },
  },
})

Your own plugin source:

// myplugin/index.js
const plugin = require('tailwindcss/plugin')
const _ = require('lodash')
const variablesApi = require('@mertasan/tailwindcss-variables/api')
const pluginComponents = require('./components')
const pluginThemes = require('./themes')

module.exports = plugin.withOptions(
  function (options) {
    return function ({addComponents, theme, config}) {

      let variableOptions = {
        variablePrefix: theme('myPlugin.prefix', '--forms')
      };

      addComponents(variablesApi.variables(_.merge(pluginThemes(theme).themes, {DEFAULT: theme('myPlugin.options', {})}), variableOptions))

      let darkVariables = theme('myPlugin.darkOptions', {});
      if (!_.isEmpty(darkVariables)) {
        addComponents(variablesApi.darkVariables(darkVariables, variableOptions, config('darkMode')))
      }

      // Automatically register components via API.
      addComponents(variablesApi.getComponents('.form', pluginComponents(theme)))

    }
  }
)

User config: (tailwind.config.js)

// tailwind.config.js
module.exports = {
  theme: {
    myPlugin: {
      options: {
        colors: {
          primary: 'indigo', // custom color instead of default color
        }
      }
    },
  },
  plugins: [require('my-plugin')],
}

Output:

:root {
  --forms-colors-primary: indigo; /* <<< default color changed via root configuration */
  --forms-colors-secondary: white;
  --forms-colors-warning: orange;
}

.form-select {
    background-color: var(--forms-colors-primary);
}

.form-select .default-multi {
    background-color: var(--forms-colors-secondary);
}

.form-select .other-multi {
    background-color: var(--forms-colors-warning);
}

Based on these examples, it won't be necessary to publish extra .css flies for your plugin styles and also, it won't be necessary for the users to sort out your style files to compile your packages.

Examples and tests

I have prepared examples on both helping with the usage and for testing all of the features that's being offered to make sure it works just fine.

Source State
Examples Examples
Plugin API Examples API Examples
Tests Tests
Travis CI Tests

Documents on examples and tests are re-organized on pull-request, push, release and etc. events. For this reason, file paths like require(../index) have been used on the example files. If you were to use the examples, you need to change the relevant lines as require('@mertasan/tailwindcss-variables').

If You Need Help

Please send any questions and issues through GitHub issues. I will try my best to help you.

Contribution

If you are to improve or/and add new features, please feel free to send pull-requests.

License

The GPL-3.0 License (GNU General Public License 3.0)

Please see License File for more information.

Github

https://github.com/mertasan/tailwindcss-variables

Comments(13)

  • 1

    Issues with text/bg opacity?

    Versions:

    • Package Version: 1.0.3
    • Tailwindcss Version: 2.1.1

    Question:

    I'm not sure if this would even be possible with how Tailwind as a whole is setup to work, but basically when using this plugin it will create a CSS variable like so

    --colors-primary: #7868e6;

    Which is great, but when using in conjunction with anything related to opacity it doesn't respect that at all

    For example

    <div class="bg-primary bg-opacity-50"></div>

    Doesn't have a background opacity of 50

    Of course this could (theoretically) be fixed in userland by setting the variable in tailwindconfig.js like so

    colors: {
	primary: {
		DEFAULT: 'var(--colors-primary), var(--tw-bg-opacity)'
	},
}

    But then this won't text into account the text-opacity classes

    Has anyone managed to figure this out?

  • 2

    Is it possible to get dots working in the variable names?

    Versions:

    • Package Version: 2.3.0
    • Tailwindcss Version: 3.1.6

    Question:

    I'm trying to generate a variable name called --sizes-3.5 (and others like it – e.g. --sizes-0.5). Here's what I've tried:

    {
      "0.5": "2px",
      "3.5": "14px",
}

    The output however, ignores the '.' – so I just get:

    --sizes-05, --sizes-35, etc.

    I also tried escaping the dot, but no luck. Any ideas?

  • 3

    Prevent adding `px` for variables that have unquoted (numeric) values

    Versions:

    • Package Version: latest
    • Tailwindcss Version: latest

    Description:

    Steps To Reproduce:

    variables: {
      DEFAULT: {
        // body
        'body-color': '#000',
        'body-bg': '#fff',
        'body-font-family': 'var(--font-primary)',
        'body-font-size': '1rem',
        'body-font-weight': 400,
        'body-line-height': 1.5,
      },

    produces

        --body-color: #000;
    --body-bg: #fff;
    --body-font-family: var(--font-primary);
    --body-font-size: 1rem;
    --body-font-weight: 400px;
    --body-line-height: 1.5px;

    400px, 1.5px - why? Hot to fix that?

  • 4

    Support for PostCSS 7?

    Would it work to run with PostCSS

    Thanks for a nice plugin!

    The plugin is dependent on PostCSS ^8.2.9.

    Vue (vue-cli) is stil dependent on PostCSS 7, so Tailwindcss needs to be used with Tailwind's PostCSS 7 compatibility build. (Added with npm install -D [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9, see https://tailwindcss.com/docs/installation#post-css-7-compatibility-build)

    Is PostCSS 8 strict needed for this plugin, or could the dependency by changed to be PostCSS 7 or 8 instead?

  • 5

    darkToRoot: true doesn't seem to be working.

    Versions:

    • Package Version: 2.5.1
    • Tailwindcss Version: 3.2.4

    Description:

    Can't seem to get this to work:

    CleanShot 2022-11-25 at 10 07 51

    Steps To Reproduce:

    Use the Tailwind Play. Set darkToRoot: true.

    Toggle the dark mode button in the tailwind play header.

    CleanShot 2022-11-25 at 10 09 16

    Which adds the 'dark' class on the html element.

    Unless I've misunderstood something that should then use the dark mode variables.

  • 6

    Keys are lowered case

    Thanks for this library.

    Versions:

    • Package Version: 2.3.0
    • Tailwindcss Version: latest

    Description:

    When using the following config:

      theme: {
    variables: {
      DEFAULT: {
        UPPER: 'red'
      },
    },
  },

    It generates it in lower case: --upper: red. The expected behavior is to generate the same key. Thanks.

  • 7

    Only Default variables are added to output

    Versions:

    • Package Version: 2.3.0
    • Tailwindcss Version: 3.0.24

    Description:

    When setting up my tailwind.config.js only variables default variables are outputted.

        variables: {
      DEFAULT: {
        'svg-logo-text': '#ECF2F4',
      },
      '.container': {
        'svg-logo-text': '#ECF2F4',
      }
    },
    darkVariables: {
      DEFAULT: {
        'svg-logo-text': '#ECF2F4',
      },
      '.container': {
        'svg-logo-text': '#ECF2F4',
      }
    },

    Here I only get this output:

    :root {
  --svg-logo-text: #ECF2F4;
}

    Thanks for taking a look! <3

  • 8

    Multiple themes with their colorSchemes (dark/light)

    Hi. I recreated myself approach with theming from react-spectrum Also, I used tailwind.

    So, for this I created UIProvider that receive theme and colorScheme props

    
import lightVars from 'app/styles/themes/default-theme/default-theme-light.vars.module.scss';
import darkVars from 'app/styles/themes/default-theme/default-theme-dark.vars.module.scss';

<UIProvider
  theme={{ light: lightVars, dark: darkVars, large: {}, medium: {}, global: {} }}
  defaultColorScheme="light"
  colorScheme={colorScheme}
  locale="ru"
>
  <Button type="button" onPress={() => setColorScheme(colorSchemeVariant)}>
    change {colorScheme}
  </Button>

  <UIProvider colorScheme="light">
    <div className="bg-primary"> primary </div>
  </UIProvider>
  <UIProvider colorScheme="dark">
    <div className="bg-primary"> primary </div>
  </UIProvider>
  {children}
</UIProvider>

    example of content of css module for one of vars files

    // dark colors
.theme-dark {
  // primary
  --primary: #7f6b38;
  --primary-active: #ffe5a1;
  --primary-light: #fff3d4;
  --primary-inverse: #000;
  // secondary
  --secondary: #fe7375;
  --secondary-active: #fc8182;
  --secondary-light: #ffecec;
  --secondary-inverse: #fff;
  // success
  --success: #58dd4d;
  --success-active: #77e06e;
  --success-light: #e5ffe3;
  --success-inverse: #000;
  // danger
  --danger: #fe7375;
  --danger-active: #fc8182;
  --danger-light: #ffecec;
  --danger-inverse: #fff;
}

    As result I have

    <div class="default-theme-dark_vars_theme-dark__dOXcD" style="color-scheme: dark;" lang="ru" dir="ltr">
  <button class="button_Button__6Eykw button_primary__KnYjr button_md__W4hur button_uppercase__XLVuR button_rounded-full__Tadfr" type="button"><span class="button_ButtonContent__5_eVt c-button__content">change dark</span></button>

  <div class="default-theme-light_vars_theme-light__YfrB6" lang="ru" dir="ltr" style="color-scheme: light;">
    <!-- Uses from child - light color scheme -->
    <div class="bg-primary"> primary </div>
  </div>
  <!-- Uses from root - dark color scheme -->
  <div class="bg-primary"> primary </div>
</div>

    Your plugin helps a lot to generate from config r g b variants for all css variabled declared inside config. But how can you implement this idea with your plugin? Thanks!

  • 9

    No css variable fallback support.

    Versions:

    • Package Version: ?.?.?
    • Tailwindcss Version: ?.?.?

    Description:

    CSS variable fallback not supported. e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/var#syntax

    Steps To Reproduce:

    Try to use css fallbacks as per spec.

    /* Fallback */
/* In the component's style: */
.component .header {
  color: var(--header-color, blue); /* header-color isn't set, and so remains blue, the fallback value */
}

.component .text {
  color: var(--text-color, black);
}

/* In the larger application's style: */
.component {
  --text-color: #080;
}
    • …
  • 10

    Translate DEFAULT-keyword to nothing in nested object notation

    When using nestet object notation, DEFAULT doesn't seems to be acknowledged the same way as with Tailwind.

    Tailwind generate the colors in this example as: testblue-light, testblue and testblue-darker. It would be nice if this plugin did the same.

    // tailwind.config.js
const colors = {
	testblue: {
		lighter: '#5883BB',
		DEFAULT: '#265796',
		darker: '#184176',
	},
};

module.exports = {
  theme: {
    colors,
    variables: {
      DEFAULT: {
        colors,
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables'),
  ],
};

    Current output:

    :root {
    --colors-testblue-lighter:#5883bb;
    --colors-testblue--d-e-f-a-u-l-t:#265796;
    --colors-testblue-darker:#184176;
}

    Desired output:

    :root {
    --colors-testblue-lighter:#5883bb;
    --colors-testblue:#265796;
    --colors-testblue-darker:#184176;
}

    I use this setup because my primary development is using TailwindCSS as is, with Vue. I want the colors to be declared so Tailwind CSS IntelliSense works with showing colors in VS-Code. (Which mean I can't use variables as Tailwind-colors) The exported variables are for some external components where I want to use the same colors. (Using PrimeVue). This is working, so this feature is really just to make the variable-name prettier.

    (And thank you very much for this nice plugin!)

  • 11

    Bump postcss from 7.0.35 to 8.2.15

    Bumps postcss from 7.0.35 to 8.2.15.

    Release notes

    Sourced from postcss's releases.

    8.2.15

    8.2.14

    • Removed source-map from client-side bundle (by @​barak007).

    8.2.13

    • Fixed ReDoS vulnerabilities in source map parsing (by @​yetingli).

    8.2.12

    • Fixed package.json exports.

    8.2.11

    • Fixed DEP0148 warning in Node.js 16.
    • Fixed docs (by @​semiromid).

    8.2.10

    8.2.9

    8.2.8

    8.2.7

    8.2.6

    • Fixed Maximum call stack size exceeded in Node#toJSON.
    • Fixed docs (by @​inokawa).

    8.2.5

    • Fixed escaped characters handling in list.split (by @​nex3).

    8.2.4

    8.2.3

    8.2.2

    8.2.1

    ... (truncated)

    Changelog

    Sourced from postcss's changelog.

    8.2.15

    8.2.14

    • Removed source-map from client-side bundle (by Barak Igal).

    8.2.13

    • Fixed ReDoS vulnerabilities in source map parsing (by Yeting Li).

    8.2.12

    • Fixed package.json exports.

    8.2.11

    • Fixed DEP0148 warning in Node.js 16.
    • Fixed docs (by @​semiromid).

    8.2.10

    • Fixed ReDoS vulnerabilities in source map parsing.
    • Fixed webpack 5 support (by Barak Igal).
    • Fixed docs (by Roeland Moors).

    8.2.9

    • Exported NodeErrorOptions type (by Rouven Weßling).

    8.2.8

    • Fixed browser builds in webpack 4 (by Matt Jones).

    8.2.7

    • Fixed browser builds in webpack 5 (by Matt Jones).

    8.2.6

    • Fixed Maximum call stack size exceeded in Node#toJSON.
    • Fixed docs (by inokawa).

    8.2.5

    • Fixed escaped characters handling in list.split (by Natalie Weizenbaum).

    8.2.4

    • Added plugin name to postcss.plugin() warning (by Tom Williams).
    • Fixed docs (by Bill Columbia).

    8.2.3

    • Fixed JSON.stringify(Node[]) support (by Niklas Mischkulnig).

    8.2.2

    • Fixed CSS-in-JS support (by James Garbutt).
    • Fixed plugin types (by Ludovico Fischer).
    • Fixed Result#warn() types.

    8.2.1

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • 12

    Bump postcss-import from 14.1.0 to 15.1.0

    Bumps postcss-import from 14.1.0 to 15.1.0.

    Changelog

    Sourced from postcss-import's changelog.

    15.1.0 / 2022-12-07

    • Add data: URL support (this is not useful for most consumers) (#515)

    15.0.1 / 2022-12-01

    • Preserve layer in ignored @imports (#510, #511)
    • Join media queries in the correct order (#512, #513)

    15.0.0 / 2022-08-30

    • BREAKING: Require Node.js v14+ (#497)
    • BREAKING: Require nameLayer option for handling anonymous layers (#496)
    • Fix handling of @media queries inside layered imports (#495, #496)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • 13

    Bump fs-extra from 10.1.0 to 11.1.0

    Bumps fs-extra from 10.1.0 to 11.1.0.

    Changelog

    Sourced from fs-extra's changelog.

    11.1.0 / 2022-11-29

    • Re-add main field to package.json for better TypeScript compatibility (#979, #981)

    11.0.0 / 2022-11-28

    Breaking Changes

    • Don't allow requiring fs-extra/lib/SOMETHING (switched to exports) (#974)
    • Require Node v14.14+ (#968, #969)

    New Features

    • Add fs-extra/esm for ESM named export support; see docs for details (#746, #974)
    • Add promise support for fs.readv() (#970)

    Bugfixes

    • Don't stat filtered items in copy* (#965, #971)
    • Remove buggy stats check in copy (#918, #976)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

Popular Tag

Related