Skip to content

Instantly share code, notes, and snippets.

View lipe-dev's full-sized avatar

Felipe Israel Camargo Pereira lipe-dev

View GitHub Profile
@Merott
Merott / tailwind-colors-as-css-variables.md
Last active June 23, 2024 12:06
Expose Tailwind colors as CSS custom properties (variables)

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

  • You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
  • You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.

@lipe-dev
lipe-dev / canada-driver-license-numbers.js
Last active March 9, 2023 11:19
Regexes for all US states and Canada provinces driver licenses. Each one has their own rules.
// Some info based on: https://learn.microsoft.com/en-us/microsoft-365/compliance/sit-defn-canada-drivers-license-number?view=o365-worldwide
const canadaDLNumberPatterns = {
Alberta: /\d{6}-\d{3}|\d{5,9}/,
"British Columbia": /\d{7}/,
Manitoba: /\w{2}-?\w{2}-?\w{2}-?\w\d{3}\w{2}/,
"New Brunswick": /\d{5,7}/,
"Newfoundland and Labrador": /\w\d{9}/,
"Nova Scotia": /\w{5}-?[0123]\d[01]\d{6}/,
Ontario: /\w\d{4}-?\d{5}\d[0156]\d[0123]\d/,