Tailwind Css Cheat Sheet

by



Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need. TailwindCSS Cheatsheet Last updated on November 9th, 2020 for TailwindCSS v1.9.6 This README contains a complete list of the TailwindCSS class names for a quick reference. There is also a more. TailWindCSS Cheat sheet. Reference list for all utility classes and CSS properties of Tailwind CSS. TailWindCSS Cheat sheet. Reference list for all utility classes and CSS properties of Tailwind CSS Created with Sketch. Cheatsheet 2.0.2. Expand All Collapse All Back to. Tailwind CSS is a CSS framework that provides a comprehensive set of utility classes to use in your markup. The utility class approach opposes traditional CSS in almost every way, which turns out to be a godsend. Here's a cheat sheet to help you navigate Tailwind's collection.

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

Margin and Padding

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

SymbolDescription
pPadding
mMargin
-mNegative margin
Css code sheet
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.

Tailwind css cheat sheet

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

Tailwind Css Cheat Sheet
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 BackTailwind Css Cheat Sheet
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.

Vezere. 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.

Tailwind Css Cheat Sheet Template

Add following Tailwind utilities

Tailwind Css Cheat Sheet Pdf

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

Webmentions

Loading counts.. Magic keyboard a1843.

Fetching Replies..