TailwindCSS

As a Design Systems Engine

@mayashavin

CLASS NAME

IS MAINLY PRESENTATIONAL

@mayashavin

CSS

should be reusable

@mayashavin

HTML

should KNoW CSS

Not opposite

@mayashavin

Building CSS

IS like building

lego

@mayashavin

PADDING

MARGIN

Font

WIDTH

HEIGHT

Writing A CSS STYLING

@mayashavin

TACHYONCSS

https://tachyons.io/

@mayashavin

TAILWINDCSS

https://tailwindcss.com/

@mayashavin

<div class="md:flex bg-white rounded-lg p-6">
  <img 
   class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"
   src="avatar.jpg"
  >
  <div class="text-center md:text-left">
    <h2 class="text-lg">Maya Shavin</h2>
    <div class="text-purple-500">Senior FED</div>
    <div class="text-gray-600">@mayashavin</div>
  </div>
</div>

@mayashavin

IS TAILWINDCSS

ANOTHER TACHYONCSS?

@mayashavin

IS TAILWINDCSS

Inline-like CSS?

Inline-line CSS?

@mayashavin

TAILWINDCSS IS

SIMILAR TO TAchyonCSS

BUT BETTER

@mayashavin

What is TailwindCSS?

Utility-first

Customizable

PostCSS

CSS SHAKE-ABLE

Extractable component classes

https://tailwindcss.com/

REFACTORINGUI Concepts

@mayashavin

yarn add tailwindcss

/* main.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

npx tailwindcss init

// tailwind.config.js
module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}