Using Tailwind CSS inside your Nuxt application

Welcome

Tailwind CSS is a utility-first CSS framework that makes it easy to build custom designs. One of the main features of Tailwind is its use of utility classes, which allow you to quickly apply common CSS styles to your HTML elements.

Here is a brief description of some of the major utility classes in Tailwind CSS:

1. Layout: These classes are used to control the layout of elements on the page. They include classes for controlling the width and height of elements, as well as classes for controlling the placement of elements within a container. They include grid, flex, block, inline-block, inline, relative, absolute, fixed and sticky.
2. Spacing: These classes are used to add padding and margin to elements. They come in a variety of sizes and can be used to add space to the top, bottom, left, right, or all sides of an element. These classes use a scale of 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80 and px as a unit.
3. Typography: These classes are used to control the font size, weight, and style of text. They come in a variety of sizes and styles and can be used to create headings, body text, and other typographical elements. Example: text-sm text-xl font-light font-bold.
4. Backgrounds and Borders: These classes are used to control the background color and border of elements. They include classes for setting the background color and border color of elements, as well as classes for controlling the border width and radius. Example: bg-black border-red-600.
5. Transitions and Animations: These classes are used to control the transition and animation of elements. They include classes for controlling the duration, delay, and easing of transitions, as well as classes for controlling the timing and iteration of animations. They include duration, ease, transition, transform, animation, animate, duration-75, ease-in, duration-100, ease-out, duration-150, ease-in-out and duration-200
6. Interactivity: These classes are used to control the interactivity of elements. They include classes for controlling the hover, focus, and active state of elements, as well as classes for controlling the cursor and pointer events. Example hover:border-blue-600 dark:hover:border-purple-600.
7. Miscellaneous: These classes include a variety of other useful utility classes, such as classes for controlling the visibility of elements, classes for controlling the overflow of elements, classes for controlling the vertical alignment of elements, and more.

It's worth noting that Tailwind CSS is highly configurable and you can add, remove or change the values of these utility classes to suit your specific needs and design.

In this tutorial, we will be using the grid and flex classes to create a responsive layout for a simple website.

1. First, install Nuxt and Tailwind CSS by following the TailwindCSS 101 article on the Foundry.
2. Create a folder components in the root of your project and add a new file called 'card.vue'.

components
|__ Card.vue

3. In the Card.vue file, you can create a card component and use Tailwind CSS classes to style it:

<template>
  <div class="bg-white p-4 rounded-lg shadow-md">
    <slot />
  </div>
</template>

4. Now you can use the Card component in your pages/index.vue file and nest any other elements within it, such as text or images.

<template>  
    <div class="bg-gray-800 text-white p-4">  
        <h1 class="text-2xl font-medium sm:text-4xl md:text-5xl lg:text-6xl">
            Hello World
        </h1>
        <p class="text-lg sm:text-xl md:text-2xl lg:text-3xl">
            Welcome to my Nuxt and Tailwind CSS page
        </p>
        <Card class="sm:w-1/2 md:w-1/3 lg:w-1/4">  
            <p>This is my custom card</p>  
        </Card>  
    </div>  
</template>

In the above example, the h1 and p elements have different text sizes depending on the screen size using the sm, md, and lg classes, this way you can make the text more readable on different devices.

Also, the Card component has different widths depending on the screen size using the same sm, md, and lg classes, this way the component adapts to the screen size and the layout remains consistent on different devices.

You now have a basic responsive layout using some of the Tailwind CSS classes. You can continue to add more elements and styles to your layout using other Tailwind classes.