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

DEMO!

Questions?

Code

By David Fekke

Made with Slides.com

Code

These are the slides for my TailwindCSS presentation

  • 497

More from David Fekke