Skip to content

Instantly share code, notes, and snippets.

@Merott
Merott / tailwind-colors-as-css-variables.md
Last active April 10, 2024 06:57
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.

@leymannx
leymannx / gulpfile.js
Last active December 7, 2022 10:57
Gulp 4 Sass BrowserSync Kickstart Example
// Requires Gulp v4.
// $ npm uninstall --global gulp gulp-cli
// $ rm /usr/local/share/man/man1/gulp.1
// $ npm install --global gulp-cli
// $ npm install
const { src, dest, watch, series, parallel } = require('gulp');
const browsersync = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
@BarelyAliveMau5
BarelyAliveMau5 / godot_decent_resize.gd
Last active February 4, 2024 20:43
Godot Engine - Screen content resizing without black-bars, nor distortions, nor content reveal
# What is this?
# This is my sample script used for a decent screen stretching mode in Godot. As
# of Godot 3.1 alpha, there are no good ways to resize the game screen without
# stretching it (thus making the image weird if you stretch it too much), or
# creating black bars on the screen borders (looks awful in my opinion), or
# letting the player see something not supposed to be seen (in this case,
# instead of showing the black bar, it zooms out)
#
# What it does?
# Basically, it doesn't let the player see anything beyond the specified
@minutiae
minutiae / tailwind_color_variables.scss
Created October 8, 2018 20:26
Tailwind CSS colors as Sass variables
$black: #22292f;
$grey-darkest: #3d4852;
$grey-darker: #606f7b;
$grey-dark: #8795a1;
$grey: #b8c2cc;
$grey-light: #dae1e7;
$grey-lighter: #f1f5f8;
$grey-lightest: #f8fafc;
$white: #fff;
$red-darkest : #3b0d0c;