TA-Pagination - Tailwind CSS plugin

Since version 2.X you can find TA-Pagination as an installable package on NPM: TA-Pagination .

From npm: Install the package.

# Install using npm

npm install --save-dev @markusantonwolf/ta-pagination

# Install using yarn

yarn add -D @markusantonwolf/ta-pagination

Inside tailwind.config.js

To use the Tailwind CSS plugin you have to add it to your Tailwind CSS config file: tailwind.config.js.

// tailwind.config.js
module.exports = {
    // ...
   variants: {
        // ...
        taPagination: ['responsive'], // default value
        extend: {
            // ...
        },
    },
    // ...
    plugins: [
        require('@markusantonwolf/ta-pagination')({
            respectPrefix: true, // respect prefix option in config: true (default) | false 
            respectImportant: true, // respect important option in config: true (default) | false 
        }),
    ]
    // ...
}
};

Theme

You can control which animations and aspect ratios are generated as utilities by modifying the following properties in the theme section of your tailwind.config.js file.

Add a taPagination object with your configuration to the theme object.

animations : Array - Define all animations you want to be generated as utilities. You can find a list of all available transitions in the Transitions documentation. On this page you will also find an introduction on how to add your own slide effects .

animation_default : String - Define the default transition. You can find a list of all available transitions in Transitions .

// tailwind.config.js
module.exports = {
    // ...
    theme: {
        // ...
        taPagination: {
            animations: [
                'swing',
                'spin',
                'swipe',
                'fade',
                'slide',
                'rotate',
                'snake',
                'window',
                'scroll',
                'fold'
            ],
            animation_default: 'swing', // default value
        },
        // ...
    },
    // ...
};

Variants

You can control which variants are generated as utilities by modifying the following property in the variants section of your tailwind.config.js file.

taPagination : Array - Feel free to add more Tailwind CSS variants to the array. By default the plugin generates all responsive variants. If you want to learn more about all Tailwind CSS variants you should check out the official Tailwind CSS documentation: Configuring Variants .

// tailwind.config.js
module.exports = {
    // ...
    variants: {
        // ...
        taPagination: ['responsive'], // default value
        extend: {
            // ...
        },
    },
    // ...
};

Plugin options

The TA-Pagination Tailwind CSS plugin supports some options for the build process.

respectPrefix: false- If you not want to respect your prefix in the tailwind configuration you should pass this option to the plugin.

respectImportant: true- If you don’t want to configure all TA-Pagination utilities as important then you have to pass this options to the plugin.

Purge CSS with Tailwind CSS

If you use Purge CSS to optimize your CSS files you have to add the following class names to your whitelist / safelist.

// tailwind.config.js

const ta_pagination_safelist = require('./node_modules/@markusantonwolf/ta-pagination/src/plugin/safelist');

module.exports = {
    purge: {
        // ...
        options: {
            safelist: [...ta_pagination_safelist],
        },
        // ...
    },
    // ...
}