TailwindCSS

JaxNode Feb 2022

# CHAPTER 2

We need You

JaxNode UG is always looking on people to present at upcoming meetings. Please contact me after the meeting or DM me @JaxNode

HTML Tables
First support CSS 1996
CSS 3, allowed positioning
LESS/SASS
Bootstrap/Bulma/Foundation
Flexbox
Grid CSS

History of CSS

# CHAPTER 2

What is TailwindCSS

Tailwind is a utility first CSS framework. This gives developers precise control of the design by using CSS class names.

Example of Tailwind CSS

<div class="flex flex-wrap">
   <h1 class="flex-auto text-lg font-semibold text-slate-900">
      Classic Utility Jacket
   </h1>
   <div class="text-lg font-semibold text-slate-500">
      $110.00
   </div>
   <div class="w-full flex-none text-sm font-medium text-slate-700 mt-2">
      In stock
   </div>
</div>

# PRESENTING CODE

# CHAPTER 2

Cascading Style Sheets Knowledge

You still need to know CSS to use Tailwindcss. Tailwind will allow you to style your content much quicker than if using plane styles.

How Tailwind Works

input.css

You define a css file that includes any directives for components you need

1.

2.

Build

Tailwind scans you files for Tailwind classes that you use for your design

3.

Output

An output file is generated with just the classes you use in your project

# CHAPTER 2

Combine classes to get the style you desire
Mobile first with support for larger screen sizes
Hover and Focus States
Dark Mode support
Functions and Directives
Custom Styles

Tailwind Basics

To install you will need Node.js
npm install tailwindcss
May need postcss and autoprefixer
Support for many frameworks
Use input.css and tailwind.config.js for configuring

Adding Tailwind

input.css file

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

# PRESENTING CODE

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

# PRESENTING CODE

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

<!-- input.css -->
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

# PRESENTING CODE

Applying Styles

Just in Time engine
Only classes used are generated
Variants define different states you want to apply styles
Large Default Color palette
Scroll behavior

Tailwindcss 3.0

Supported Frameworks

Next.js	Laravel	Vite
Nuxt.js	Gatsby	Create React App
SvelteKit	Angular	RoR
Remix	Phoenix	Parcel
	ExpressJS

<button class="px-4 py-2 bg-green-500 text-white rounded-xl hover:bg-green-300">
  Press Me
</button>

# PRESENTING CODE

Code Transitions

Style example

<style>
  div.mybox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 12px 6px;
  }
</style>

<div class="flex justify-center items-start px-4 py-2">
  Sample text
</div>

Layout
Flexbox & Grid
Sizing & Spacing
Typography
Effects & Filters
Interactivity
Transitions & Animations

Classes