├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package.json └── src └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | .pnpm-debug.log 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [0.1.0] - 2022-02-06 9 | 10 | Initial release 11 | 12 | [0.1.0]: https://github.com/tailwindlabs/tailwindcss-line-clamp/releases/tag/v0.1.0 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Mario Hamann 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tailwindcss-var 2 | 3 | This plugin allows to create and use scoped CSS variables for colors and spacings in your Tailwind CSS project. 4 | 5 | For live-examples check out [mariohamann.de/tailwindcss-var](https://mariohamann.de/tailwindcss-var). 6 | 7 | ## Please read ❤️ 8 | 9 | - ⚠️ This plugin expects you to use Tailwind CSS >2.0 || >3.0 with JIT mode enabled. (Tested with >3.3) 10 | - 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. 11 | - 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. 12 | 13 | ## Migration from 1.x 14 | 15 | - 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. :)) 16 | - 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](#modify-color-variables) below.) 17 | 18 | ## Installation 19 | 20 | 1. Add package to your project e. g. `npm install @mariohamann/tailwindcss-var`. 21 | 2. Add the plugin to your `tailwind.config.js` with `require('@mariohamann/tailwindcss-var')`. 22 | 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](#modify-color-variables): 23 | 24 | 4. To test if everything works, add the following classes to an object with text `varcolor-indigo text-varcolor-500`. 25 | 26 | ## Examples 27 | 28 | ### Example 1: Basic color change 29 | 30 | 1. Define your object once with text-varcolor-600, bg-varcolor-50 etc. 31 | 2. Fill the variable (dynamically) with e. g. varcolor-pink. 32 | 3. text-varcolor-600 renders as text-pink-600, bg-varcolor-50 renders as bg-pink-50. 33 | 34 | Try it yourself: [https://play.tailwindcss.com/BqEnApCXDd](https://play.tailwindcss.com/0r55inbvBq). 35 | 36 | ![basic color change code example](https://github.com/mariohamann/tailwindcss-var/assets/26542182/6b13ee4c-83a2-43c1-ab29-fb848ee23c6d) 37 | 38 | ### Example 2: Hierarchy and subvalues 39 | 40 | - Variables are automatically consumable by every child element. 41 | - You can overwrite variables in every child. 42 | - You can overwrite single variants of the variable with other colors or opacities. 43 | 44 | Try it yourself: https://play.tailwindcss.com/19SLgiXbMN 45 | 46 | ![hierarchy and subvalues code example](https://user-images.githubusercontent.com/26542182/221135288-682e5028-7b2d-4760-8680-3dd4b3951e97.png) 47 | 48 | ### Example 3: Sizes 49 | 50 | - Besides color variables you can set variables for spacings. 51 | - You can use the variables for width, height, margins etc. 52 | - Since version 2.1.0 you can use the variables for fontSize, too. 53 | 54 | Try it yourself: https://play.tailwindcss.com/70ezDS1hIy 55 | 56 | ![size code example](https://user-images.githubusercontent.com/26542182/221134417-007611dc-d3d3-4567-b799-5bb61079e84e.png) 57 | 58 | ### Example 4: Arbitrary values 59 | 60 | - You can set and use arbitrary values for both spacings and colors. 61 | - In the example height and roundedness resize perfectly with the width of the object. 62 | 63 | Try it yourself: https://play.tailwindcss.com/0r55inbvBq 64 | 65 | ![arbitrary values example](https://user-images.githubusercontent.com/26542182/221136127-116b7e84-c12e-4263-89a3-9f8030943a71.png) 66 | 67 | ## Modify color variables 68 | 69 | Out of the box, the plugin extends your theme with the following color and spacing. 70 | 71 | ```js 72 | { 73 | theme: { 74 | extend: { 75 | colors: { 76 | 'varcolor': { 77 | 50: 'var(--tw-varcolor-50)', 78 | 100: 'var(--tw-varcolor-100)', 79 | 200: 'var(--tw-varcolor-200)', 80 | 300: 'var(--tw-varcolor-300)', 81 | 400: 'var(--tw-varcolor-400)', 82 | 500: 'var(--tw-varcolor-500)', 83 | 600: 'var(--tw-varcolor-600)', 84 | 700: 'var(--tw-varcolor-700)', 85 | 800: 'var(--tw-varcolor-800)', 86 | 900: 'var(--tw-varcolor-900)', 87 | }, 88 | }, 89 | spacing: { 90 | 'varspacing': 'var(--tw-varspacing)', 91 | }, 92 | }, 93 | } 94 | } 95 | ``` 96 | 97 | If you have other color definitions which you want to use with variables, just change the `varcolor`-definitions in your theme e. g.: 98 | 99 | ```js 100 | { 101 | theme: { 102 | extend: { 103 | colors: { 104 | primary: { 105 | light: '#FF88DD', 106 | dark: '#FFFF00', 107 | } 108 | secondary: { 109 | light: 'FF88FF', 110 | dark: '#FF00FF', 111 | } 112 | 'varcolor': { 113 | light: 'var(--tw-varcolor-light)', 114 | dark: 'var(--tw-varcolor-dark)', 115 | }, 116 | }, 117 | }, 118 | } 119 | } 120 | ``` 121 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mariohamann/tailwindcss-var", 3 | "version": "2.1.0", 4 | "description": "This plugin allows to create and use scoped CSS variables for colors and spacings in your Tailwind CSS project.", 5 | "main": "src/index.js", 6 | "keywords": [ 7 | "tailwindcss", 8 | "css", 9 | "variables" 10 | ], 11 | "author": "Mario Hamann", 12 | "repository": "https://github.com/mariohamann/tailwindcss-var", 13 | "license": "MIT", 14 | "prettier": { 15 | "printWidth": 100, 16 | "semi": false, 17 | "singleQuote": true, 18 | "trailingComma": "es5" 19 | }, 20 | "peerDependencies": { 21 | "tailwindcss": ">=3.0.0 || >=3.0.0-alpha.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin') 2 | 3 | const tailwindcssVar = plugin( 4 | function ({ matchUtilities, theme }) { 5 | if (theme('colors.varcolor', {})) { 6 | const variablesPalette = Object.keys(theme('colors.varcolor', {})) 7 | 8 | /* 9 | * Set one-level variables like varcolor-red, varcolor-indigo, varcolor-[pink] etc. 10 | */ 11 | 12 | matchUtilities( 13 | { 14 | varcolor: (color) => { 15 | if (typeof color === 'string') { 16 | const output = {} 17 | variablesPalette.map((variant) => { 18 | output[`--tw-varcolor-${variant}`] = color 19 | }) 20 | return output 21 | } else { 22 | const output = {} 23 | variablesPalette.map((variant) => { 24 | if (color[variant]) { 25 | output[`--tw-varcolor-${variant}`] = color[variant] 26 | } else if (color['DEFAULT']) { 27 | output[`--tw-varcolor-${variant}`] = color['DEFAULT'] 28 | } 29 | }) 30 | return output 31 | } 32 | }, 33 | }, 34 | { values: theme('colors', {}), type: 'color' } 35 | ) 36 | 37 | /* 38 | * Set two-level variables like varcolor-50-red, varcolor-100-indigo, varcolor-50-[pink] etc. 39 | * We need to transform the color palette from format "color.shade" to "shade.color" 40 | * Examples: 41 | * - red.50 ... red.900 -> 50.red ... 900.red 42 | * - black -> 50.black ... 900.black 43 | */ 44 | 45 | const colorsAsEntries = Object.entries(theme('colors', {})) 46 | 47 | const getTransformedColors = (variant) => { 48 | const transformedColors = {} 49 | colorsAsEntries.map(([key, value]) => { 50 | if (typeof value === 'string') { 51 | transformedColors[key] = value 52 | } else { 53 | if (value[variant]) { 54 | transformedColors[key] = value[variant] 55 | } else if (value['DEFAULT']) { 56 | transformedColors[key] = value['DEFAULT'] 57 | } 58 | } 59 | }) 60 | return transformedColors 61 | } 62 | 63 | variablesPalette.map((variant) => { 64 | matchUtilities( 65 | { 66 | [`varcolor-${variant}`]: (value) => ({ 67 | [`--tw-varcolor-${variant}`]: value, 68 | }), 69 | }, 70 | { values: getTransformedColors(variant), type: 'color' } 71 | ) 72 | }) 73 | } 74 | 75 | /* 76 | * Set spacing variables like varspacing-2 etc. to be used with h-varspacing, w-varspacing, m-varspacing etc. 77 | * 78 | * It would be nicer to use "size" instead of "spacing", 79 | * but I want to stick to the official Tailwind terminology. 80 | */ 81 | 82 | if (theme('spacing.varspacing', {})) { 83 | matchUtilities( 84 | { 85 | varspacing: (spacing) => ({ 86 | '--tw-varspacing': spacing, 87 | }), 88 | }, 89 | { values: theme('spacing', {}) } 90 | ) 91 | } 92 | }, 93 | { 94 | theme: { 95 | extend: { 96 | colors: { 97 | varcolor: { 98 | 50: 'var(--tw-varcolor-50)', 99 | 100: 'var(--tw-varcolor-100)', 100 | 200: 'var(--tw-varcolor-200)', 101 | 300: 'var(--tw-varcolor-300)', 102 | 400: 'var(--tw-varcolor-400)', 103 | 500: 'var(--tw-varcolor-500)', 104 | 600: 'var(--tw-varcolor-600)', 105 | 700: 'var(--tw-varcolor-700)', 106 | 800: 'var(--tw-varcolor-800)', 107 | 900: 'var(--tw-varcolor-900)', 108 | 950: 'var(--tw-varcolor-950)', 109 | }, 110 | }, 111 | spacing: { 112 | varspacing: 'var(--tw-varspacing)', 113 | }, 114 | fontSize: { 115 | varspacing: 'var(--tw-varspacing)', 116 | } 117 | }, 118 | }, 119 | } 120 | ) 121 | 122 | module.exports = tailwindcssVar 123 | --------------------------------------------------------------------------------