Style -- Tailwindcss #

Introduction #

Tailwindcss is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Installation #

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Configuration #

npx tailwindcss init

Usage #

<div class="bg-gray-200">
  <div class="bg-white shadow overflow-hidden sm:rounded-lg">
    <div class="px-4 py-5 sm:px-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900">Profile</h3>
      <p class="mt-1 max-w">
        This information will be displayed publicly so be careful what you
        share.
      </p>
    </div>
  </div>
</div>

Configuration #

// tailwind.config.js
module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};