Skip to Content

Brag Blog

css variables to tailwindcss controlled by shopifys color

Got the change the color in shopifys UI to then create the colors as css variables so i can use them in tailwind

From tailwind.config.js get the designtokens eeem colors

(const colors = require("./tailwind/designToken-color");
module.exports = {
extend: {
colors: colors


module.exports = {
"primary-50": 'rgb(var(--color-primary-50) / <alpha-value>)',

Create a snippet in snippets/cssvariables.liquid

{% style %}
:root {
{% assign color_primary_50 = settings.color_primary | color_lighten: 45 %}
--color-primary-50: {{ color_primary_50.rgb }};
{% endstyle %}

Voila Ready to go

  <div class="bg-primary-50 h-12 w-12"> BAM! </div>

Instagram feed

Got my instagram feed to work with no tracking a smooth import from and then using 11ty fetch to make it happen

const EleventyFetch = require("@11ty/eleventy-fetch");

module.exports = async function() {
let url = "[...]";
return EleventyFetch(url, {
duration: "15m", //
type: "json"

Decap updated

Decap is begging to move so today i upgraded to the new version 3 on
Gonna wait a few days before im gonna upgrade to the new version just in case ;)

<script src="^3.0.0/dist/decap-cms.js"></script>