Tailwind Cheat Sheet



  1. Tailwind Css Cheat Sheet
  2. Tailwind Cheat Sheet
← Go Back
Broken Post? → Let me know

2020-06-12 Updates

The Tailwind Cheat Sheet Reference list of common CSS properties you'll want to use in Tailwind, and their relative classes Published Jul 09, 2018, Last Updated Dec 03, 2019. Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need. Instagram marketing can be easy, especially when you have access to this Instagram cheat sheet. No, you don't need to buy followers or likes to build your engagement. You can build a large and real Instagram following by simply using the right tools to perform the right tasks.

  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

Tailwind Cheat Sheet

3. Configure PostCSS for Tailwind

  1. Create a file postcss.config.js in the project root.

🌍 Tailwind Cheat Sheet - Tailwind CSS class names, variants and directives cheat sheet. UI Libraries, Components & Templates Legend: 💙 Official resource 📚 Library 🧩 Components 📁 Templates. TailwindCSS Cheatsheet. Mac software free download for pc. 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.

  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

Webmentions

Loading counts..

Fetching Replies..

Blogs
1. https://nick-basile.com/blog/post/5-takeaways-from-using-tailwind-css-in-real-projects

2.https://frontendnews.io/editions/2018-08-08-tailwind-css-tutorial

3.https://nick-basile.com/blog/post/how-to-write-a-plugin-for-tailwind-css Software_reporter_tool.

4.https://medium.com/@morrislaptop/zeplin-and-tailwind-css-a-match-made-in-heaven-665dbba468a5

Tailwind css cheat sheet

Built with Tailwind
1. https://builtwithtailwind.com/

Tailwind Cheat Sheet
1. https://nerdcave.com/tailwind-cheat-sheet

Sophos ssl vpn mac tunnelblick. Tailwind Components
1. https://tailwindcomponents.com/

Tailwind CSS

Tailwind Css Cheat Sheet

By Nirazan Basnet

Tailwind Cheat Sheet