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

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

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

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>
✍️