Building Reactive Apps with Svelte and Tailwind/

...

/

Styling Table Entries with Tailwind

Styling Table Entries with Tailwind

Learn how to utilize Tailwind to style components with just a couple of classes.

We'll cover the following...

Currently, our table doesn't look too user friendly. Without any styling, it's hard to use the application. In this lesson, we're going to take a look at how to use Tailwind classes effectively to style everything with just a handful of class names, without writing any CSS.

Style the header

Let's first take a look at our Header component.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Style the header with Tailwind

Let’s look at what’s happening here. We have the following classes on our header element:

  • flex: To set the display property of the element as flex

  • justify-between: Creates a justify-content: space-between ...