TailwindCSS integration

It's now possible to use Tailwind CSS within Fasty CMS. Of course it was already doable by doing a copy/paste from your built CSS. But now, Fasty will build your production file directly.

All you have to do is to write in your layout's CSS/Sass field

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

/* ... your SASS/CSS content here ... */

Fasty will then extract all your pages, partials & components and will build the production CSS file based on their content. Only used CSS will be extracted.

Notice that the process is a little bit slow. It take around 5s to compile your CSS output. Notice that our server is not using a powerful CPU. 

Define your config file

You can manage your config file directly within Fasty CMS. You just have to define a key / value in the general settings : 

{
  ...
  
  tailwindcss_config": "tailwindcss_config"
  ...
}

Then create a partial with your config file content called tailwindcss_config.

module.exports = {
  purge: ['./*.html'],
  darkMode: false,
  theme: { extend: {} },
  variants: {},
  plugins: []
}

You can now use the whole Tailwind CSS features like components definitions

Enjoy!


Leave a comment