JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<button type="button" class="cmp-cta fullSize">
  Click me!
</button>

SCSS

// Bootstrap define `$font-size-base` directly in rem
// We need a `px` based global variable to use it in rem and em calculations
$font-size-base-px: 16px !default;

/// This project supports rem
$rem: true !default;

/// Base Font Size
//
// | Variables   | Values                     |
// |:------------|---------------------------:|
// | $bfs  | _font-size_ -> **browser** |
//
// Styleguide Config.baseFontSize

$bfs: 16px !default;

// Default context font-size for em calculation
$cfs: $font-size-base-px !default;

/// Line height
//
// - `$lh`: line height.
//
$lh: round($bfs / (2/3)) !default;


//  # Suppresion de l’unité

// - `$number` : variable (avec ou sans unité) passée en paramètre ;
// - `@return` : variable sans unité retournée.
@function strip-unit($number) {
  @return $number / ($number * 0 + 1);
}


//  # Conversion de pixels en ems

// - `$px` : variable en pixels passée en paramètre ;
// - `$contexte` : contexte de travail en pixels (par défaut égal à la taille de texte du projet) ;
// - `@return` : équivalence en `ems` retournée.
@function em($px, $contexte: $cfs) {
  @return(strip-unit($px) / strip-unit($contexte) * 1em);
}


 // # Conversion de pixels en rems

 // - `$px` : variable en pixels passée en paramètre ;
 // - `$bfs` : contexte de travail égal à la taille de texte du navigateur par défaut ;
 // - Pour les navigateurs modernes. `@return` : équivalence en `rems` retournée.
 // - Pour IE 8 et inférieurs. `@return` : équivalence en pixels retournée.
 @function rem($px) {
  @if $rem {
    @return(strip-unit($px) / strip-unit($bfs) * 1rem);
  } @else {
    @return(strip-unit($px) * 1px);
  }
}


// -------------------------------------------------------------------------- //
// Color variables
// -------------------------------------------------------------------------- //
$white:       #ffffff !default; 
$gallery:     #ececec !default; 
$alto:        #d0d0d0 !default; 
$nobel:       #B4B4B4 !default; 
$dove:        #737373 !default;...