knowledge/awesome-cheatsheets
1
1
Fork 0
mirror of https://github.com/namibia/awesome-cheatsheets.git synced 2024-06-02 12:50:46 +00:00
Code Issues Releases Activity

docs(tailwind): rework style

Browse Source
This commit is contained in:
Julien Le Coupanec 2020-03-28 22:20:11 +01:00
parent a821fe9d12
commit 54c206f63d
1 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/tailwind.css
View File

@ -14,35 +14,34 @@
* xl: min-width: 1280px; * xl: min-width: 1280px;
*/ */
/* ******************************************************************************************* /* *******************************************************************************************
* CONTAINER * LAYOUT
* A component for fixing an element's width to the current breakpoint.
* ******************************************************************************************* */ * ******************************************************************************************* */
/*
* Container
* ----------
* A component for fixing an element's width to the current breakpoint.
*/
.container .container
/* /*
* none: width: 100%; * Box-sizing
* sm: max-width: 640px; * ----------
* md: max-width: 768px;
* lg: max-width: 1024px;
* xl: max-width: 1280px;
*/
/* *******************************************************************************************
* BOX-SIZING
* Utilities for controlling how the browser should calculate an element's total size. * Utilities for controlling how the browser should calculate an element's total size.
* By default, only responsive variants are generated for box-sizing utilities. * By default, only responsive variants are generated for box-sizing utilities.
* ******************************************************************************************* */ */
.box-border /* box-sizing: border-box; */ .box-border /* box-sizing: border-box; */
.box-content /* box-sizing: content-box; */ .box-content /* box-sizing: content-box; */
/* ******************************************************************************************* /*
* DISPLAY * Display
* ----------
* Utilities for controlling the display box type of an element. * Utilities for controlling the display box type of an element.
* By default, only responsive variants are generated for display utilities. * By default, only responsive variants are generated for display utilities.
* ******************************************************************************************* */ */
.hidden /* display: none; */ .hidden /* display: none; */
.block /* display: block; */ .block /* display: block; */
@ -61,22 +60,24 @@
.table-row-group /* display: table-row-group; */ .table-row-group /* display: table-row-group; */
.table-row /* display: table-row; */ .table-row /* display: table-row; */
/* ******************************************************************************************* /*
* FLOATS * Floats
* ----------
* Utilities for controlling the wrapping of content around an element. * Utilities for controlling the wrapping of content around an element.
* By default, only responsive variants are generated for float utilities. * By default, only responsive variants are generated for float utilities.
* ******************************************************************************************* */ */
.float-right /* float: right; */ .float-right /* float: right; */
.float-left /* float: left; */ .float-left /* float: left; */
.float-none /* float: none; */ .float-none /* float: none; */
.clearfix /* &::after { content: ""; display: table; clear: both; } */ .clearfix /* &::after { content: ""; display: table; clear: both; } */
/* ******************************************************************************************* /*
* CLEAR * Clear
* ----------
* Utilities for controlling the wrapping of content around an element. * Utilities for controlling the wrapping of content around an element.
* By default, only responsive variants are generated for clear utilities. * By default, only responsive variants are generated for clear utilities.
* ******************************************************************************************* */ */
.clear-left /* clear: left; */ .clear-left /* clear: left; */
.clear-right /* clear: right; */ .clear-right /* clear: right; */