TA-Pagination - Getting started

To add TA-Pagination to your website you choose between two different ways. The prefered way is to use the Tailwind CSS plugin together with Purge CSS.

The other option is to use a CDN for script and styles. The good thing is you can combine both. So you might end up with the Tailwind CSS plugin as part of your build process and for the TA-Gallery script you might use the CDN link.

The best way: Tailwind CSS Plugin

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: Add the plugin to your Tailwind CSS config file. Learn more about the Tailwind CSS plugin .

// tailwind.config.js
module.exports = {
    // ...
    plugins: [
        require('@markusantonwolf/ta-pagination')
    ]
    // ...
}

You can find the TA-Pagination javascript source file in ./node_modules/@markusantonwolf/ta-pagination/src/scripts/ta-pagination.js so you can copy it into your own script folder or include the path into your build process. If you want to include the babelified and minified version use this one: ./node_modules/@markusantonwolf/ta-pagination/dist/js/ta-pagination.min.js

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],
        },
        // ...
    },
    // ...
}

Learn more about how to configure TA-Pagination plugin and include or sync the files with your build process - check out the Tailwind CSS plugin documentation.

Tailwind CSS Plugin

The function taPagination is added to the window object. This solves a major issue with webpack, gulp or other bundler tools. Read more about this issue here .

The fastest way: Not for production

The other way to start with Tailwind CSS, Alpine JS and TA-Pagination is to use a CDN for everything.

To start the fastest way using Tailwind CSS and Alpine JS is from a CDN. Put the following links into your head section of your html source code. Please be sure you use the “defer” attribute for Alpine JS in the script tag. This attribute makes sure that Alpine JS gets executed right after loading.

<!-- into <head> -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<link href="https://unpkg.com/@markusantonwolf/ta-pagination@latest/dist/css/ta-pagination.css" rel="stylesheet">

<!-- at the end of <body> -->
<script src="https://unpkg.com/@markusantonwolf/ta-pagination@latest/dist/js/ta-pagination.min.js"></script>

CodePen example

To start even faster you can use my CodePen example and play around with it. This example uses the latest version of the CDN scripts and styles.

CodePen

Tailwind CSS

I strongly recommend using Tailwind CSS and Purge CSS in your build process. Adding TA-Gallery to your Tailwind CSS configuration is very easy.

The TA-Pagination Tailwind CSS plugin generates all utilities for you. If you don’t want to use the plugin you can use the pre-rendered and minified CSS utilities from the /dist folder or via CDN.

Previous Introduction Next Examples

Last updated

17. May 2022

Reading Time

~ 3 minutes

Contents