Create your first Tailwind CSS plugin

September 8, 2021 ≈ 57 seconds

Tailwind CSS is a modern utility-first CSS framework with great documentation. This guide will show you how to extend Tailwind with plugins, which you can write yourself. We are going to create plugin.js file and include it in tailwind.config.js configuration file. The purpose of the plugin is to just output «Hello world!»

1. Run npm install tailwindcss && npx tailwind init command to create tailwind.config.js file

2. Create plugin.js file

const plugin = require ('tailwindcss/plugin')

module.exports = plugin(function({addComponents}) {
    const patterns = {
        '.hello-world:after': {
            content: "'Hello world!'",
        },
    }

    addComponents(patterns)
})

3. Include plugin in tailwind.config.js

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [require('./plugin.js')],
}

4. Create src.css file

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

5. Compile src.css into style.css with npx tailwindcss -i src.css -o style.css command

6. Create index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="hello-world"></div>
</body>
</html>

7. Open it in the browser. You should see «Hello world!» text.

That's it! Now try to create more complex plugins, using official documentation

Subscribe to our newsletter

If you provide url of your website, we send you free design concept of one element (by our choice)

Subscribing to our newsletter, you comply with subscription terms and Privacy Policy