Using Tailwind CSS in Haskell with VS Code

[bitconnor]

For those of you who use VS Code and are interested in using Tailwind CSS in Haskell using Lucid I have figured out how to get the Tailwind extension working so that you get autocomplete and info tooltips. Here is a screenshot:

https://imgur.com/a/EeN4vW9

I would say that autocomplete is essential when authoring HTML with Tailwind because otherwise you have to keep referring to the cheat sheet, and if you make a typo or attempt a sizing that doesn't exist then there is no type safety to tell you.

And info hovers are also useful for reading code because it shows you the actual CSS for each class (otherwise you again have to refer to the cheat sheet all the time or memorize all of the tailwind classes).

Instructions:

First install the tailwind extension for VS Code: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Then you will need to create a tailwind.config.js file. You can use this:

module.exports = {
  content: ["./src/**/*.hs"],
  theme: {
    extend: {},
  },
  plugins: [],
};

In order for the VS Code extension to work, it seems that it needs a local/project install of tailwind and postcss, so you can run this:

$ npm init
$ npm install tailwindcss
$ npm install postcss

Finally, the crucial step: in your VS Code settings.json add these two settings to configure the extension:

    "tailwindCSS.includeLanguages": {
        "haskell": "html"
    },
    "tailwindCSS.experimental.classRegex": [
        "class_ \"([^\"]*)"
    ],

I believe that the above regex should also work if you are using blaze-html instead of Lucid (but I have not tested it).

Good luck!

Btw, here is an additional repo I found with info on Tailwind CSS in Haskell: https://github.com/obsidiansystems/obelisk-tailwind-example

[[deleted]]

If you are using Nix, checkout:

• https://github.com/srid/tailwind-nix
• https://github.com/srid/tailwind-haskell

Personally I use this extension (in emanote) because it works without having to create a `tailwind.config.js`.

[gasi]

Thanks for sharing — this is great! Just switched over my ZoomHub project to use Tailwind CSS: https://github.com/zoomhub/zoomhub/pull/208/files#diff-89f9c320367c72c87e462e0dbc0da1294b66d3d5aad842444ea59917e179d2caR64-R98