Tailwind CSS Variables

Bu paket, Tailwind CSS projeniz için CSS değişkenlerini tanımlamanın kolay bir yolunu sunar. Bu paketi, kuyruk rüzgarı yapılandırmanızda özel değişkenler oluşturmak için kullanabilirsiniz. Bu, CSS'nizde tutarlılığı korumanızı kolaylaştırır, tekrarlamayı azaltır, çeşitli koşullara göre değişkenleri yapılandırmanıza olanak tanır ve değişkenleri belirlemek için CSS dosyalarınızla doğrudan çalışma ihtiyacını ortadan kaldırır.

Kullanım şekli, tailwindcss'in varsayılan yapılandırmaları ile benzer şekildedir. Dark Mode için ayrı değişken grubu belirleyebilmek, plugin API aracılığıyla kendi eklentilerinize kolayca entegre edebilmek de mümkün.

Öne çıkan özellikler

Değişkenler, tailwindcss renklerini tanımlamak kadar basit.
Değişkenleri :root ya da custom CSS seçicilere tanımlayabilirsiniz.
Değişkenler iç içe geçmiş obje notasyonu (nested object notation) kullanılarak oluşturulabilir.
Dark Mode için farklı değişkenler oluşturulabilir.
Dark Mode değişkenleri, yapılandırmanızdaki class ya da media moduna göre otomatik tanımlanır.
Dark Mode özel seçicisi, Tailwind yapılandırmasını dikkate alır.
Plugin API aracılığıyla kendi eklentinizi oluştururken tema yapılandırması yapmanıza olanak sağlar.
Değişkenler için prefix tanımlaması yapılabilir. (plugin API için faydalı)
Değişkenler, yapılandırma dosyasında veya .css vb. stil dosyalarında kullanılabilir.
Çoklu tema gibi gereksinimlerinizi ek bir eklentiye gerek kalmadan kendiniz yapılandırabilirsiniz!

Dökümantasyonlar

Dil	Dökümantasyon linki
English	Documentation
Türkçe	Dokümantasyon

Versiyon Uyumluluğu

Tailwind CSS	Paket
2.x	1.x
3.x	2.x

Kurulum

npm install -D @mertasan/tailwindcss-variables

Canlı önizleme

Basit bir örnek: https://play.tailwindcss.com/hCpcvnGsPx?file=config

Basit Kullanım

// 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

`class` modu ile

// 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
}

Özel Dark Mode Seçicisi

Tailwind yapılandırmanızda etkinleştirilmiş ise, eklentinin özel seçicinizi kullanacağını unutmayın.

// tailwind.config.js

module.exports = {

  darkMode: ['class', '.custom-dark-selector'],

  theme: {
    variables: {
      DEFAULT: {
        colors: {
          red: {
            50: 'red',
          },
        },
      },
    },
    darkVariables: {
      DEFAULT: {
        colors: {
          red: {
            50: 'blue',
          },
        },
      },
    },
  },
  plugins: [
    require('@mertasan/tailwindcss-variables')
  ]
}

Output:

:root {
  --colors-red-50: red
}

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

`darkToRoot` ayarları ile

Eğer tailwindcss yapılandırmanızda darkMode eğer class olarak tanımlıysa, eklentinin darkToRoot ayarını kullanarak özelleştirebilirsiniz.

// tailwind.config.js

module.exports = {

  darkMode: ['class', '.custom-dark-selector'],

  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,
    })
  ]
}

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
}

`media` modu ile

// 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 Kullanımı

// 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
}

İç içe geçmiş obje notasyonu (Nested)

// 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
}

Key adlandırma kuralları

Değişken keyleri yalnızca belirli karakterlere sahip olabilir. Diğer karakterler otomatik olarak temizlenir. Objelerde alt tire (_) kullanımı mümkün olduğundan, alt tireler de orta çizgiye (-) dönüştürülür.

Rule:

/[^a-zA-Z0-9-.]+/gi

öncesi	sonrası
hello[$&+,:;=?@#'<>-^*()%!]WORLD	hello-WORLD
hello__world	hello-world
css_variables_for-tailwindcss	css-variables-for-tailwindcss
foo-bar-1.0	foo-bar-1\.0

İşte bir örnek:

// tailwind.config.js

module.exports = {
  theme: {
    variables: {
      DEFAULT: {
        colors: {
          'hello[$&+,:;=?@#|\'<>-^*()%!]WORLD': '100%',
          underscore_to_dash: '100%',
          'underscore_to_dash-with-dash': '100%',
          auto_dash: '100%',
        },
        sizes: {
          1.5: '1rem',
          xl: {
            '3.0': '2rem',
          },
        },
      },
      '[type=\'button\']': {
        'hello[$&+,:;=?@#|\'<>-^*()%!]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%;
  --sizes-1\.5: 1rem;
  --sizes-xl-3\.0: 2rem
}

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

Yardımcı Fonksiyonlar (Helpers)

`colorVariable()`

Renk değişkenlerini colorVariable helper fonksiyonunu kullanarak tanımlamanız halinde, renkleri text-opacity ya da bg-opacity gibi ek classlar ile uyumlu hale getirmeniz mümkün.

// tailwind.config.js

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

module.exports = {
  theme: {
    screens: false,
    colors: {
      primary: colorVariable('--colors-primary'), // HEX (3 haneli)
      secondary: colorVariable('var(--colors-secondary)'), // HEX (6 haneli)
      white: '#ffffff', // standart kullanım (output incelemesi için)
      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 (colorVariable() yardımcısı kullanmadan)
      },
      gray: 'var(--colors-gray)', // HEX (6 haneli) (colorVariable() yardımcısı kullanmadan)
      green: 'var(--colors-green)', // RGB (colorVariable() yardımcısı kullanmadan)
    },
    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

Eğer forceRGB true olarak tanımlanırsa ek değişkenler oluşturulmaz.

Öncesi

// 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))
}

Sonrası

// 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))
}

colorVariable için extendColors

Değişkenler arasındaki renklerin her birisini colorVariable('var(--colors-red)') şeklinde kullanmak yerine, renkleri extendColors kısmında tanımlayabilirsiniz.

Örnek:

// 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
}

2. Örnek - forceRGB ile birlikte kullanımı:

// 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
}

toBase

Varsayılan olarak, değişkenler @tailwind base; stillerine eklenir. Eğer projenizin css dosyasına @tailwind base; stillerini dahil etmiyorsanız, toBase seçeneğini false durumuna getirebilirsiniz. Bu durumda değişkenler @tailwind components; stillerine dahil edilecektir.

//...
plugins: [
  require('@mertasan/tailwindcss-variables')({
    toBase: false, // varsayılan: true
  })
]
//...

tailwindcss.com - Functions and directives

Kendi eklentileriniz için API örneği

Ayrıntılı açıklama

// 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

tailwindcss-variables plugin API'yi bileşenlerinizi kayıt etmek için de kullanabilirsiniz.

// 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);
}

Gerçek kullanım örneği (detaylı)

Avantajları neler?

Laravel için bir form oluşturucu (PHP) paketi oluşturduğunuzu hayal edin. Bu durumda özelleştirmeniz gereken birçok stil olacağına eminim. Ancak en gerekli olan şeylerden bir tanesi renkler! Bileşenleri kendi belirlediğiniz renklerle oluşturursunuz. Elbette bu renkler vendor:publish komutu ile kullanıcılar tarafından özelleştirilebilir ama bunu herkes için daha basit hale getirebilirsiniz. Kullanıcılar renkleri kendileri yapılandırabilir, isterlerse eklentinizi dark mode için yapılandırabilirler. Böylelikle, kullanıcılar bazı basit değişiklikler için .css veya .blade.php dosyalarını özelleştirmek zorunda kalmazlar. Bu sayede eklentinizi güncel şablonlarıyla birlikte kullanarak, gelecekteki versiyon güncellemelerine uyum sağlayabilirler. Bu açıklamayı okuduysanız eğer, bu eklentininin ortaya çıkma nedenini artık biliyorsunuz demektir. :)

Dezavantajları neler?

Bir fikriniz varsa eğer, lütfen PR göndermekten çekinmeyin.

Bu örnek ile ilgili kaynaklar:

kaynak
test

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);
}

Bu örnekteki gibi bir kurgu sayesinde, eklentinizin stilleri için, sizin ek .css dosyaları yayınlamanıza, kullanan kişilerin ise paketlerinizi kullanabilmek için stil dosyaları derlemelerine gerek kalmayacak.

Örnekler ve testler

Hem kullanım şekli konusunda yardımcı olması için, hem de sunulan tüm özellikleri test ederek doğru çalıştığından emin olmak için örnekler hazırladım.

Kaynak	Durum
Örnekler
Plugin API örnekleri
Testler

Örneklere ve testlere ait dosyalar pull-request, push, release vb. etkinliklerde otomatik olarak yeniden derlenmektedir. Bu nedenle, örnek dosyalarda require(../index) gibi dosya yolları kullanıldı. Örnekleri kullanacaksanız eğer, ilgili yerleri require('@mertasan/tailwindcss-variables') şeklinde değiştirmeniz gerekiyor.

Yardım

Lütfen GitHub issues aracılığıyla tüm soru ve sorunlarınızı iletin. Size yardımcı olmaya çalışacağım.

Katkı

Herhangi bir özelliği iyileştirir veya yeni özellikler eklerseniz eğer, lütfen pull-request göndermekten çekinmeyin.

License

The MIT License (MIT). Please see License File for more information.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.tr.md

README.tr.md

Tailwind CSS Variables

Öne çıkan özellikler

Dökümantasyonlar

Versiyon Uyumluluğu

Kurulum

Canlı önizleme

Basit Kullanım

Dark Mode

`class` modu ile

Özel Dark Mode Seçicisi

`darkToRoot` ayarları ile

`media` modu ile

Prefix Kullanımı

İç içe geçmiş obje notasyonu (Nested)

Key adlandırma kuralları

Yardımcı Fonksiyonlar (Helpers)

`colorVariable()`

forceRGB

Öncesi

Sonrası

colorVariable için extendColors

toBase

Kendi eklentileriniz için API örneği

API Component helper

Gerçek kullanım örneği (detaylı)

Örnekler ve testler

Yardım

Katkı

License

Files

README.tr.md

Latest commit

History

README.tr.md

File metadata and controls

Tailwind CSS Variables

Öne çıkan özellikler

Dökümantasyonlar

Versiyon Uyumluluğu

Kurulum

Canlı önizleme

Basit Kullanım

Dark Mode

class modu ile

Özel Dark Mode Seçicisi

darkToRoot ayarları ile

media modu ile

Prefix Kullanımı

İç içe geçmiş obje notasyonu (Nested)

Key adlandırma kuralları

Yardımcı Fonksiyonlar (Helpers)

colorVariable()

forceRGB

Öncesi

Sonrası

colorVariable için extendColors

toBase

Kendi eklentileriniz için API örneği

API Component helper

Gerçek kullanım örneği (detaylı)

Örnekler ve testler

Yardım

Katkı

License

`class` modu ile

`darkToRoot` ayarları ile

`media` modu ile

`colorVariable()`