Marko: Using Marko with Tailwind CSS

[sirinath]

How do you configure and use Marko to use with Tailwind CSS?

[DylanPiercey]

@sirinath there shouldn't be anything Marko specific about setting up tailwind in a Marko project.

You can follow this guide https://tailwindcss.com/docs/installation/.

For purge-css you'll want to make sure to use .marko files instead of .html files (https://purgecss.com/plugins/postcss.html#postcss)

[sirinath]

Will Marko's concise syntax cause any issues?

[DylanPiercey]

Nope. purge-css uses fairly basic regexps to find things that look like class names (there will always be a possibility of false positives, but you need to make sure there are no false negatices).

You can configure what that regexps looks like for different languages, see the extractors option https://purgecss.com/configuration.html#options

[sirinath]

Just to be safe is there a particular extractors to be used with Marko?

[haikyuu]

@DylanPiercey Note that tailwindcss itself uses purge-css under the hood.

And the following in tailwind.config.js works

module.exports = {
  purge: {
    content: ["./src/**/*.marko"],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

For tailwind intellisense (using tailwind vscode plugin), I set it up in the vscode settings.json like this

"tailwindCSS.includeLanguages": {
    "Nunjucks": "html",
    "Marko": "html", 
    "marko": "html", 
  },

Now I have autocomplete for tailwindcss classes in marko templates. 🎉

[DylanPiercey]

@haikyuu thanks for verifying!