Pelican with Tailwind CSS

pelican-tailwind-css.md

How to use Tailwind CSS with Pelican

These steps show how to install Tailwind CSS in a Pelican project, purge and minify it so you don't have to reference a 3+ MB CSS file but only several kB.

1. virtualenv venv

2. . venv/bin/activate

3. pip install nodeenv

4. nodeenv env

5. . env/bin/activate

6. npm install postcss postcss-cli autoprefixer tailwindcss purgecss cssnano

7. npm init -y

8. npx tailwindcss-cli@latest build -o css/tailwind.css

9. Create postcss.config.js:

   module.exports = {
     plugins: [
       require("tailwindcss"),
       require("autoprefixer"),
       require("cssnano")
     ],
   };
   

10. Create tailwind.config.js referencing your theme's HTML files:

    module.exports = {
      purge: [
        './themes/mynewtheme/templates/*.html',
      ],
      darkMode: false, // or 'media' or 'class'
      theme: {
        extend: {},
      },
      variants: {
        extend: {},
      },
      plugins: [],
    }
    

11. Update package.json and replace "main" and "scripts" with:

    "main": "postcss.config.js",
    "scripts": {
      "build": "postcss css/tailwind.css -o output/static/css/tailwind.purged.min.css" 
    },
    

12. pip install pelican[markdown]

13. pip install pelican-seo

14. pelican-quickstart

15. Put a theme in ./themes/mynewtheme/ and set THEME = themes/mynewtheme in pelicanconf.py

16. Create content

17. make html or make publish (generate non-production or production version of the site)

18. NODE_ENV=production npm run build (generate a minified and purged tailwind.purged.min.css)

I have created a plugin that should make your life easier.
Let me know if you have some feedback 😉

https://github.com/pelican-plugins/tailwindcss