Skip to content
On this page

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

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

Configuration

bash
npx tailwindcss init

Usage

html
<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

js
// 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: [],
};

COPYRIGHT © 2022 Codeshaper, All rights reserved.