JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<!-- In this tutorial I'll show you how to generate classes through scss -->

<!-- We will use some classes to add background color to elements -->
<!-- Then we will generate che classes in scss -->


<!-- create a grid container to align elements -->
<div class="grid">
  <!-- name cells as grid-item to be relevant --> 
  <!-- Add the background-class that will be generated.ratio-square is just to make them into perfect squares (design purpose only) -->
  <div class="grid-item"><div class="background-primary ratio-square"></div></div>
  <div class="grid-item"><div class="background-secondary ratio-square"></div></div>
  <div class="grid-item"><div class="background-accent ratio-square"></div></div>
</div>

SCSS

// remove browser styles (by default chrome adds an 8px margin and makes adjustments to some elements - we remove them)

// * is the selector for all elements
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; // please read about box-sizing
}

// style the grid
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); // this will make 3 columns on all devices
  grid-template-rows: auto; // this will adjust the height based on the grid-item content
  grid-gap: 30px; // the spacing betwiin columns and rows
  padding: 30px; // the spacing between the grid container and its cells;
}

// create the perfect square element
.ratio-square {
   width: 100%; // ensure the element is 100% of it's parent width
   height:0; // we set the height to 0 in order to enable creating the ratio
   padding-bottom: 100%; // padding bottom is percentage of the width. since it's 100% it will create a perfect square
}

// create a fallback background-color inc ase there is some errors in scss generator so will still see the squares
// select all classes that have the "background-" string in their name
[class*="background-"] {
  background-color: rgba(0,0,0,0.12); // just some transparent black
}

// ================================
// create the array of colors that will be used to generate the color classes

// define the variables
$primary:       #d32f2f;
$secondary:     #7B1FA2;
$accent:        #FFA000;

// create an array of colors. for each entry in the array we will generate a class

$colors: (
  primary: $primary,
  secondary: $secondary,
  accent: $accent
);
// define the parameters inside the array. the $key is what we use to generate the class name. $color is the value we use

// create the for each function in scss that will run through the array entries.

// !Note: these arrays in scss are called "lists - check the erb for scss lists for more info"
@each $key, $color in $colors {
  
  // interpolate the classname background- with the key from the array
 ...

JavaScript

// no Javascript required