Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

1. Install Purpose CSS via npm

For most projects (and to take advantage of Tailwind's customization features), you'll want to install Tailwind via npm.

# Using npm
npm install @webpixels/purpose-css

# Using Yarn
yarn add @webpixels/purpose-css

2. Add Purpose CSS to your project

// Core
@import "~@webpixels/purpose-css/scss/content";
@import "~@webpixels/purpose-css/scss/layout";
@import "~@webpixels/purpose-css/scss/type";

// Components
@import "~@webpixels/purpose-css/scss/components";

// Utilities
@import "~@webpixels/purpose-css/scss/utilities";

3. Compile your CSS with Purpose

Purpose UI comes with a few of building tool options, so you can choose the one that fits your project’t needs. You can choose between Gulp, Laravel Mix or Webpack. Below you can find examples of how to process CSS with Purpose.

Using Gulp

module.exports = {
  plugins: [

Using Laravel Mix

The webpack.mix.js file is your configuration layer on top of webpack. Most of your time will be spent here.

Head over to your webpack.mix.js file and customize the configuration file for your needs. Check out all the options you have on the official Laravel Mix website.

mix.sass('resources/sass/app.scss', 'public/css')
        processCssUrls: false

For more information on what this feature does and the implications of disabling it, see the Laravel Mix documentation.

Using Webpack

Hello, Friend!

Get unlimited access by upgrading to the PRO version.