Lektor 💛 Tailwind CSS

A Lektor plugin that adds Tailwind CSS to your project seamlessly.

Get Started

1. Add plugin to your project

   $ lektor plugin add lektor-tailwind
   $ lektor plugin list
   

2. Configure your template paths

   In tailwindcss.config.js:

   module.exports = {
     // './' refers to the lektor build output directory, NOT the project dir
     content: ['./**/*.html'],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

3. Add the Tailwind directives to your CSS

   In assets/static/style.css:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

4. Start lektor build or server:

   $ lektor build
   $ lektor server
   

You got it. Please refer to official Tailwind documentation for more information on using Tailwind CSS and its CLI.

Configuration

By default, the input CSS file in assets/static/style.css, while it can be changed by css_path plugin config.