Gain insights into Tailwind CSS essentials. Discover designing responsive sections, flexible layouts, and custom plugins. Learn creating and optimizing components with Vue for effective web application styling.

tarball.tar.gz

talwind

chapter 2-1

chapter1-1

chapter 4 chapter 3-2

chapter 5  quest

chapt 4 - IR

Tailwind CSS is a popular utility-first CSS framework that is considered a helping hand in designing complex web pages in an efficient and effective way. It helps developers build responsive and highly customizable user interfaces with ease.

You’ll begin with an introduction to the basic concepts of Tailwind CSS. Next, you’ll learn how to design different sections of a website. Then, you’ll learn how to create Tailwind components and build them with Vue. Next, you’ll learn how to create responsive and grid layouts. Moving ahead, you’ll learn how to create flexible layouts and customize and optimize a workflow. You’ll finish with learning how to use the official Tailwind plugins, customize them and create a custom arrows plugin for practice.

After completing this course, you’ll be able to craft user interfaces and functionalities for any web application by using Tailwind CSS. This course targets all the developers who want to style and layout their applications efficiently.

Understanding the Basics of Tailwind CSS

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
<link rel="stylesheet" type="text/css" href="tailwind.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<header class="flex justify-between items-center sticky top-0 z-10 py-4 bg-slate-900">
  <div class="flex-shrink-0 ml-6 cursor-pointer">
    <i class="fas fa-user-ninja fa-2x text-red-600"></i>
    <span class="text-3xl font-semibold text-sky-500">Web Dev Ninjas</span>
  </div>
  <ul class="flex mr-10 font-semibold">
    <li class="mr-6 p-1 border-b-4 border-red-600">
      <a class="cursor-default text-slate-300" href="#">Home</a>
    </li>
    <li class="mr-6 p-1">
      <a class="text-slate-300 hover:text-sky-500" href="#">Services</a>
    </li>
    <li class="mr-6 p-1">
      <a class="text-slate-300 hover:text-sky-500" href="#">Portfolio</a>
    </li>
    <li class="flex-shrink-0 mr-6 p-1">
      <a class="text-slate-300 hover:text-sky-500" href="#">About Us</a>
    </li>
  </ul>
</header>

</body>
</html>

/* /styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .alert {
    @apply flex flex-col p-4 pt-2 w-full border-l-8;
  }
  .alert-title {
    @apply font-semibold italic text-lg;
}
  .alert-content {
    @apply leading-tight text-sm;
}
.alert-info {
    @apply bg-blue-100 border-blue-500
}
  .alert-info-title {
    @apply text-blue-500;
}
  .alert-info-content {
    @apply text-blue-800;
}
  .alert-warning {
    @apply bg-red-100 border-red-500
}
  .alert-warning-title {
    @apply text-red-500;
}
  .alert-warning-content {
    @apply text-red-800;
} }

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


Overview

Getting Started with Tailwind CSS

Going Beyond the Basics

Building Complex Designs with Tailwind

Customizing Tailwind and Optimizing Your Workflow

Working with Tailwind Plugins

Conclusion

Solution: Creating a Header with Tailwind CSS

Solution