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 install -D @greenwood/plugin-postcss tailwindcss autoprefixer
```
Now run the Tailwind CLI to initialize our project with Tailwind
```
npx tailwindcss init
```

Create two PostCSS configuration files (two files are needed in Greenwood to support ESM / CJS interop)

// postcss.config.cjs (CJS)
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

// postcss.config.mjs (ESM)
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.

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

And include that in your layouts or pages

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

Now you're ready to start using Tailwind! 🎯

<!-- src/pages/index.html -->
<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