카테고리 없음

Tailwind Css Cheat Sheet

agteltitarutur 2021. 6. 7. 00:26


W3schools html button. I wrote this cheat sheet because I find myself constantly referencing the Tailwind docs to remind a particular class (I’m starting out and I don’t have muscle memory yet for it)

Here are the things I use the most.

  • Margin and Padding
  • Flexbox
  • Modifiers

A very elegant and helpful Tailwindcss cheatsheet. umeshmk/Tailwindcss-cheatsheet. Tailwind CSS Cheat Sheet. CSS; Quick search through Tailwind classes and styles. Go to Tailwind CSS Cheat Sheet; Tailwind Gradient Designer. CSS; Color; Generate tailwind gradient classes. Go to Tailwind Gradient Designer; The Hero Generator.

Margin and Padding

Compose those 3 tables. Add a dash before the value (e.g. pt-2, m-auto)

SymbolDescription
pPadding
mMargin
-mNegative margin
SymbolDescription
tTop
rRight
bBottom
lLeft
xHorizontal
yVertical
ValueDescription
00
10.25rem
20.5rem
30.75rem
41rem
51.25rem
61.5rem
82rem
102.5rem
123rem
164rem
205rem
246rem
328rem
px1px
autoauto

margin: 0 auto

I sometimes use margin: 0 auto to center things.

Azure Storage Explorer allows you to quickly view all the storage services under your account. You can browse through, read, and edit data stored in those services through a user-friendly graphical interface. Upload, download, and manage Azure blobs, files, queues, and tables, as well as Azure Cosmos DB and Azure Data Lake Storage entities. Easily access virtual machine disks, and work with either Azure Resource Manager or classic storage accounts. Download Microsoft Azure Storage Explorer - Easily manage blobs, blob containers, tables and queues and other types of Azure Storage data with the help of this Microsoft-vetted application. Microsoft Azure Storage Explorer is a standalone app that makes it easy to work with Azure Storage data on Windows, macOS, and Linux. In this article, you'll learn several ways of connecting to and managing your Azure storage accounts. Download microsoft azure storage explorer.

The class mx-auto applies it.

Width

ClassCSS
w-1width: 0.25rem
w-2width: 0.5rem
w-3width: 0.75rem
w-4width: 1rem
w-6width: 1.5rem
w-8width: 2rem
w-10width: 2.5rem
w-12width: 3rem
w-16width: 4rem
w-24width: 6rem
w-32width: 8rem
w-48width: 12rem
w-64width: 16rem
w-autowidth: auto
w-pxwidth: 1px
w-1⁄2width: 50%
w-1⁄3width: 33.33333%
w-2⁄3width: 66.66667%
w-1⁄4width: 25%
w-3⁄4width: 75%
w-1⁄5width: 20%
w-2⁄5width: 40%
w-3⁄5width: 60%
w-4⁄5width: 80%
w-1⁄6width: 16.66667%
w-5⁄6width: 83.33333%
w-fullwidth: 100%
w-screenwidth: 100vw

Max Width

ClassCSS
max-w-xsmax-width: 20rem
max-w-smmax-width: 30rem
max-w-mdmax-width: 40rem
max-w-lgmax-width: 50rem
max-w-xlmax-width: 60rem
max-w-2xlmax-width: 70rem
max-w-3xlmax-width: 80rem
max-w-4xlmax-width: 90rem
max-w-5xlmax-width: 100rem
max-w-fullmax-width: 100%

Min width

ClassCSS
min-w-0min-width: 0
min-w-fullmin-width: 100%

Font Family

ClassCSS
font-sansfont-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-seriffont-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
font-monofont-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

Font Size

ClassCSS
text-xsfont-size: .75rem
text-smfont-size: .875rem
text-basefont-size: 1rem
text-lgfont-size: 1.125rem
text-xlfont-size: 1.25rem
text-2xlfont-size: 1.5rem
text-3xlfont-size: 1.875rem
text-4xlfont-size: 2.25rem
text-5xlfont-size: 3rem

Font weight

ClassCSS
font-hairlinefont-weight: 100
font-thinfont-weight: 200
font-lightfont-weight: 300
font-normalfont-weight: 400
font-mediumfont-weight: 500
font-semiboldfont-weight: 600
font-boldfont-weight: 700
font-extraboldfont-weight: 800
font-blackfont-weight: 900

Colors

Tailwind provides us those classes we can use to match the corresponding color:

  • transparent
  • black
  • gray
  • white
  • red
  • orange
  • yellow
  • green
  • teal
  • blue
  • indigo
  • purple
  • pink

Warning: gray was grey before TailWind 1.0. Keep this in mind if you have an older project around.

Every color has various levels. You can use -100 up to -900 to make the color go from less intense to more intense:

  • orange-100
  • orange-200
  • orange-300
  • orange-400
  • orange-500
  • orange-600
  • orange-700
  • orange-800
  • orange-900

Text color

Prepend text- to any color

Background color

Prepend bg- to any color

Center text

Use text-center

Line Height

ClassCSS
.leading-noneline-height: 1
.leading-tightline-height: 1.25
.leading-normalline-height: 1.5
.leading-looseline-height: 2

Flexbox

Container

ClassCSS
flexdisplay: flex
inline-flexdisplay: inline-flex

Items

Direction

ClassCSS
flex-rowflex-direction: row
flex-row-reverseflex-direction: row-reverse
flex-colflex-direction: column
flex-col-reverseflex-direction: column-reverse

Wrapping

ClassCSS
flex-no-wrapflex-wrap: nowrap
flex-wrapflex-wrap: wrap
flex-wrap-reverseflex-wrap: wrap-reverse

Align items

ClassCSS
items-stretchalign-items: stretch
items-startalign-items: flex-start
items-centeralign-items: center
items-endalign-items: flex-end
items-baselinealign-items: baseline

Align content

ClassCSS
content-startalign-content: flex-start
content-centeralign-content: center
content-endalign-content: flex-end
content-betweenalign-content: space-between
content-aroundalign-content: space-around

Align self

ClassCSS
self-autoalign-self: auto
self-startalign-self: flex-start
self-centeralign-self: center
self-endalign-self: flex-end
self-stretchalign-self: stretch

Justify content

ClassCSS
justify-startjustify-content: flex-start
justify-centerjustify-content: center
justify-endjustify-content: flex-end
justify-betweenjustify-content: space-between
justify-aroundjustify-content: space-around

Flex, grow, shrink

ClassCSS
flex-initialflex: initial
flex-1flex: 1
flex-autoflex: auto
flex-noneflex: none
flex-growflex-grow: 1
flex-shrinkflex-shrink: 1
flex-no-growflex-grow: 0
flex-no-shrinkflex-shrink: 0

Modifiers

Hover

hover:

Download my free CSS Handbook

← Go Back
Broken Post? → Let me know

2020-06-12 Updates

  1. Replaced autoprefixer with postcss-preset-env, which supports autopprefixer and more. Set up instruction can be found in the official documentation too.
  2. Tailwind CSS version 1.4.4 supports purge css natively. Installation for purgecss & @fullhuman/postcss-purgecss are removed.

2020-02-29 Updates

  1. Replaced concurrently with npm-run-all
  2. Fixed initial empty page load - Added sleep 5 in package.json.

Based on https://github.com/billimarie/simple-react-tailwind-tutorial

Assumption

I will assume that you know how to create a new React site using Create-React-App and created a site.

Table of Contents

  1. Install DEV dependencies
  2. Create Tailwind configuration file
  3. Configure PostCSS for Tailwind
  4. Create a Tailwind file
  5. Create NPM scripts
  6. Import Tailwind CSS Output

1. Install DEV dependencies

2. Create Tailwind configuration file

3. Configure PostCSS for Tailwind

  1. Create a file postcss.config.js in the project root.
  1. Configure Post CSS to work with Tailwind
    1. postcss-preset-env - Supports newer CSS syntax and much more! (e.g. replaces autoprefixer)
    2. cssnano - Minify CSS to reduce bundle size

4. Create a Tailwind file

Create a file ./src/styles/tailwind.css.

Add following Tailwind utilities

5. Create NPM Scripts

package.json scripts.

  1. build:css - converts Tailwind to CSS
  2. watch:css - Watch Tailwind changes and writes CSS
  3. env:dev/prod - Sets an environment variable for development or production mode
  4. react-scripts:start: Starts 5 seconds later to prevent an initial empty page
  5. react-scripts:build: Creates a production-ready bundle
  6. start - Watches Tailwind changes and starts CRA
  7. build - Build Tailwind and production version of CRA site

6. Import Tailwind CSS Output

  1. Go to ./src/index.js
  2. Replace import './index.css'; with import './styles/index.css';

Resources

  1. create-react-app template in TypeScript (created by me 🙂), cra-template-tailwindcss-typescript.
    • Scaffold a new CRA app like npx create-react-app my-app --template tailwindcss-typescript
    • Most of steps in this post is used in the project
  2. Demo repository - https://github.com/dance2die/template.tailwind.cra
    • Created by following this post
  3. CodeSandbox template - https://codesandbox.io/s/create-react-app-tailwind-oqvyu
    • You can fork and play around with Tailwind + React with this one :)

Image Credit: Patent Model of a Sheet-Feed Apparatus for Printing Machines

Tailwind Css Documentation

Webmentions

Css Cheater

Sheet

Loading counts..

Fetching Replies..