Tailwind

Tailwind (opens in a new window) is a CSS utility library providing all the modern features and capabilities of CSS in a compact, composable, and efficient way.

You can see an example in this repo (opens in a new window).

Installation

As Tailwind is a PostCSS plugin, you'll need to take a couple of extra steps to get things setup for the first time, but for the most part you can just follow the steps listed on the Tailwind docs (opens in a new window).

Let's install Tailwind and needed dependencies into our project, including Greenwood's PostCSS plugin (opens in a new window)

npm i -D @greenwood/plugin-postcss tailwindcss autoprefixer

yarn add @greenwood/plugin-postcss tailwindcss autoprefixer --save-dev

pnpm add -D @greenwood/plugin-postcss tailwindcss autoprefixer

Now run the Tailwind CLI to initialize our project with Tailwind
```
$ npx tailwindcss init
```

Create a PostCSS configuration file in the root of your project with needed Tailwind plugins

export default {
  plugins: [(await import("tailwindcss")).default, (await import("autoprefixer")).default],
};

Create a tailwind.config.js file and configure accordingly for your project

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {},
  plugins: [],
};

Add the PostCSS plugin to your greenwood.config.js

import { greenwoodPluginPostCss } from "@greenwood/plugin-postcss";

export default {
  plugins: [greenwoodPluginPostCss()],
};

Usage

Now you'll want to create an "entry" point CSS file to include the initial Tailwind @imports.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

And include that in your layouts or pages

<html>
  <head>
    <link rel="stylesheet" href="../styles/main.css" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Now you're ready to start using Tailwind! 🎯

<html>
  <head>
    <link rel="stylesheet" href="../styles/main.css" />
  </head>

  <body>
    <h1 class="text-center text-xl">Welcome to my website!</h1>
  </body>
</html>

Edit on GitHub

Getting Started

Hosting

Ecosystem

Tutorials