Installation

Pagedone UI - Tailwind CSS component library

Pagedone is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.

Getting started

This guide will help you get started with Pagedone UI, including how to run, customize, update, and integrate your project!

By default, the PageDone UI is built to work with the latest version of Tailwind CSS, so please choose your installation method accordingly.

First, you need to make sure that you have a working Tailwind CSS (v3) or Tailwind CSS (v4) project installed and that you also have Node and NPM installed on your machine.

Pagedoen UI is compatible with both Tailwind CSS v3 and Tailwind CSS v4, but the installation process is different for each version. Please make sure to follow the correct installation steps for your Tailwind CSS version to ensure that Pagedone UI works properly in your project.

How to install Tailwind CSS Click here

Require via NPM

1. Install Pagedone as a dependency using NPM by running the following command:

npm install pagedone

2. Require the CSS that powers the styles of elements inside the <head> tag 

<link href="../path/to/src/pagedone-v2.css" rel="stylesheet"/>

3. Require the JavaScript code that powers the interactive elements before the end of your <body> tag 

<script src="../path/to/src/pagedone.js"></script>

Include via CDN

The quickest way to get started working with Pagedone is to simply include the CSS and JavaScript into your project via CDN.

Require the following stylesheet inside the <head> tag:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/src/css/pagedone-v2.css " rel="stylesheet">

And include the following JavaScript file before the end of the <body> element:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/js/pagedone.js"></script>

Keep in mind that for the better performance with Pagedone, it's highly recommended to use the Tailwind CSS CDN or install Tailwind CSS in your machine.

Still Using older version? (Tailwind v3)

Below is the process to install Pagedone UI in your Tailwind CSS v3 project, if you are still using Tailwind CSS v3 and you don't want to upgrade to v4 yet, you can follow the installation steps below to get started with Pagedone UI in your project.

Require via NPM

1. Install Pagedone as a dependency using NPM by running the following command:

npm install [email protected]

2. Require the CSS that powers the styles of elements inside the <head> tag 

<link href="../path/to/src/pagedone.css" rel="stylesheet"/>

3. Require the JavaScript code that powers the interactive elements before the end of your <body> tag 

<script src="../path/to/src/pagedone.js"></script>

Include via CDN

Require the following stylesheet inside the <head> tag:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/src/css/pagedone.css " rel="stylesheet">

And include the following JavaScript file before the end of the <body> element:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/js/pagedone.js"></script>

Upgrade Guide (From Version v3 to v4)

Upgrading your Tailwind CSS projects from v3 to v4.

Tailwind CSS v4.0 is a new major version of the framework, so while we've worked really hard to minimize breaking changes, some updates are necessary. This guide outlines all the steps required to upgrade your projects from v3 to v4.

Tailwind CSS v4.0 is designed for Safari 16.4+, Chrome 111+, and Firefox 128+. If you need to support older browsers, stick with v3.4 until your browser support requirements change.

Using the upgrade tool

If you'd like to upgrade a project from v3 to v4, you can use our upgrade tool to do the vast majority of the heavy lifting for you: 

$ npx @tailwindcss/upgrade

For most projects, the upgrade tool will automate the entire migration process including updating your dependencies, migrating your configuration file to CSS, and handling any changes to your template files.

The upgrade tool requires Node.js 20 or higher, so ensure your environment is updated before running it.

For more information about the upgrade process, please check the official Tailwind CSS Upgrade Guide here or you can conatct us any time.