Keeperhunter436

← Go Back

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.

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.

2020-02-29 Updates

1. Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make the developer experience as enjoyable as possible. We've got first-class CSS grid support, composable transforms and gradients powered by CSS variables, support for modern state selectors like:focus-visible, and tons more.
2. Tailwind CSS Cheat Sheet. Details — ( 34 ) Previous Layoutit Grid: Learning CSS Grid Visually With a Generator CSS-Tricks; Next Command Line Power User — A free video series for web developers on learning a modern command line workflow with ZSH, Z and related tools.
3. Tailwind Cheat Sheet 🌍 - Tailwind CSS class names, variants and directives cheat sheet. Description Visit Site. Related Projects. Grayscale Design 🎨🌍🔧 - A Luminance-based color palette generator. RustyWind 🔼 - CLI tool for sorting Tailwind CSS classes.
4. 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.

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. Cisco webex teams mac.

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.

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

Tailwind Css Documentation

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 :)

Confluence import markdown. Image Credit: Patent Model of a Sheet-Feed Apparatus for Printing Machines

Webmentions

Loading counts..

Html Css Cheat Sheet