Tailwind

Tailwind 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.

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.

Let's install Tailwind and needed dependencies into our project, including Greenwood's PostCSS plugin

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