Application toolkit - Installation

Our application toolkit is a set of UI components and elements built with the world's fastest growing framework - Tailwind CSS.

Quick setup

This guide will help you get started with the HS2 Application Toolkit, including how to run, customize, update, and integrate your project!

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

HS2 tailwind preset

Our application toolkit uses the HS2 Tailwind Preset located within the HS2 Frontend Package. Request access to the HS2 Frontend Package by raising a request via Service Now. Once access has been granted proceed with the following:

1. Add the .npmrc file in the root of your project

registry=https://pkgs.dev.azure.com/HS2SYSDEV/_packaging/hs2-designsystem-artifacts/npm/registry/ always-auth=true

2. Install the HS2 Frontend Package

npm i hs2-frontend

3. Add the preset into the tailwind config

// tailwind.config.js

module.exports = {
  // SET CONTENT PATHS BASED ON YOUR OWN PROJECT!
  content: ['./app/views/**/*.njk'],
  presets: [require('./node_modules/hs2-frontend/dist/hs2-tailwind')],
};

Preline

The HS2 Tailwind Preset includes the Preline UI preset. Depending on your framework you may need to follow additional steps to setup Preline. See their framework guides for more information.

Manual installation

It is recommended to use our HS2 Tailwind Preset so you can easily stay up to date with changes, however if you wish to install manually here is a copy of the preset, which you can copy and paste into your project. You must also setup Preline and install any plugins within the config below.

//tailwind.config.js

module.exports = {
  // SET CONTENT PATHS BASED ON YOUR OWN PROJECT!
  content: ['./app/views/**/*.njk', 'node_modules/preline/dist/*.js'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Open Sans', 'Arial', 'sans-serif'],
      },
      colors: {
        // Main Colours
        'hs2-primary': {
          DEFAULT: '#1E3773',
          50: '#6F8ED9',
          100: '#5F82D5',
          200: '#3F68CD',
          300: '#2F56B4',
          400: '#264693',
          500: '#1E3773',
          600: '#122247',
          700: '#070C1A',
          800: '#000000',
          900: '#000000',
          950: '#000000',
        },
        'hs2-primary-hover': '#122247',
        'hs2-cyan': '#2079C6',
        'hs2-secondary': '#A8518A',
        'hs2-secondary-hover': '#823F6B',
        'hs2-info': '#2079C6',
        'hs2-info-hover': '#185B96',
        'hs2-success': '#00703C',
        'hs2-success-hover': '#00381E',
        'hs2-warning': '#B36100',
        'hs2-danger': '#D4351C',
        'hs2-danger-hover': '#A22915',
        'hs2-purple': '#4C2C92',

        // Link Colours
        'hs2-hover-state': '#7C2855',
        'hs2-link': '#2079C6',
        'hs2-visited': '#330072',
        'hs2-active': '#002F5C',

        // Text Colours
        'hs2-text': '#212B32',
        'hs2-text-light': '#4C6272',

        // Border Colours
        'hs2-border': '#D8DDE0',
        'hs2-border-input': '#4C6272',

        // Neutral Colours
        'hs2-black': '#222222',
        'hs2-grey-1': '#4C6272',
        'hs2-grey-2': '#768692',
        'hs2-grey-3': '#AEB7BD',
        'hs2-grey-4': '#D8DDE0',
        'hs2-grey-5': '#F0F4F5',
        'hs2-white': '#FFFFFF',
      },
    },
  },
  darkMode: 'class',
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [require('preline/plugin'), require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio')],
};