Skip to Content

Brag Blog

css variables to tailwindcss controlled by shopifys color

Wed, Nov 22, 2023

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

designtoke-colors.js

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

Wed, Nov 22, 2023

Got my instagram feed to work with no tracking a smooth import from https://behold.so and then using 11ty fetch to make it happen

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

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


Decap updated

Wed, Nov 22, 2023

Decap is begging to move so today i upgraded to the new version 3 on morten.dk
Gonna wait a few days before im gonna upgrade https://saga11.dev to the new version just in case ;)

<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
✍️