EN

Configuration

An easy to use guide on how to configure and customise the design system.

By default, all necessary configurations and values that ensure a smooth and consistent set of components have been embedded into the ` @AEGov/DesignSystem ` plugin.

You do not need to this to your configuration file. By installing the plugin provided, you will be extending the following configurations into your project.


module.exports = {
	theme: { 
		screens:{
			'sm':'640px',
			'md':'768px',
			'lg':'1024px',
			'xl':'1280px',
			'2xl':'1536px'
		},
		container: {
			padding: {
				DEFAULT: '0.625rem',
				md:'0.875rem',
				lg:'1.375rem',
				xl:'1.25rem'
			},
			center: true
		},
		fontFamily: {
			'roboto': ['\'Roboto\'','ui-sans-serif','system-ui','-apple-system','BlinkMacSystemFont','\'Segoe UI\'','\'Helvetica Neue\'','sans-serif'],
			'inter':['\'Inter\'','\'Helvetica Neue\'','ui-sans-serif','system-ui','sans-serif'],
			'notokufi': ['\'Noto Kufi Arabic\'','ui-sans-serif','\'Helvetica Neue\'','sans-serif'],
			'alexandria': ['\'Alexandria\'','\'Helvetica Neue\'','ui-sans-serif','system-ui','sans-serif']
		},
		fontSize: {
			'xs':'0.75rem',
			'sm':'0.875rem',
			'base':'1rem',
			'lg':'1.125rem',
			'xl':'1.25rem',
			'2xl':'1.5rem',
			'3xl':'1.875rem',
			'h5':'1.375rem',
			'h4':'1.75rem',
			'h3':'2.375rem',
			'h2':'3.125rem',
			'h1':'4.25rem',
			'display':'5.625rem'
		},
		colors: {
			...aegovColors,
			'primary':aegovColors.aegold,
			'secondary':aegovColors.aeblack,
			'primary-support':aegovColors.camel,
			'secondary-support':aegovColors.seablue
		},
		extend: {
			boxShadow: {
		    	'button': `0px 0px 0px 5px`
		    },
		    height: {
		    	'4.5': '1.125rem',
		    	'13': '3.25rem'
		    },
		    width : {
		    	'4.5': '1.125rem',
		    	'13': '3.25rem'
		    }
		}
	},
	safelist: [
		'aegov-drawer-backdrop',
		'aegov-modal-backdrop',
		'opacity-100',
		'opacity-0',
		'aegov-backdrop',
		{
			pattern: /(?:^|\s)(justify|items)-(start|center|end)(?:\s|$)/,
		}
	],
}

Creating your configuration file.

By following the documentaion on TailwindCSS.com on how to setup your configuration, you will learn more about how to create your own configuration file. You may also rename your config file to what you need, and further add additional values required.

When starting a new project, always ensure to add the ` @AEGov/DesignSystem ` plugin to the ` tailwindcss.config.js ` file. Without the addition of this plugin, your project will not inherit the components.


module.exports = {
	// ...
	plugins: [
		require('@aegov/design-system')
	]
}

To extend the complete use TailwindCSS features, we also require that you add additional required plugins to your project. Hence, your plugin confgirations will be as follows:


module.exports = {
	// ...
	plugins: [
		require('@aegov/design-system'),
		require('@tailwindcss/typography'),
	    require('@tailwindcss/forms')
	]
}

The ` @tailwindcss/typography ` plugin provides the ability to control the style of HTML elements generated by a CMS, while the ` @tailwindcss/forms ` plugin is essential to add the necessary functionality to components that may be used in the creation of forms.

Configuring your brand colour

A federal authority may choose to brand the website with colours that are not the primary colours defined - which is AE GOLD and AE BLACK. An authority may select a different primary colour, however, they are advised to use a dark colour scheme for the secondary colour.

How to add brand colours?

Once you have set up your project, and created the ` tailwind.config.js ` file, you can add the colours in the object in this file. Here is an example:


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
  	extend: {
		colors: {
			'primary': {
				/* Your colour swatch from 50 to 950 */
			},
			'secondary': {
				/* Your colour swatch from 50 to 950 */
			},
			'primary-support': {
				/* your support swatch for primary, from 50 to 600 */
			},
			'secondary-support': {
				/* your support swatch for primary, from 50 to 600 */
			}
		}
	}
  },
  plugins: [
    require('@aegov/design-system'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms')
  ]
}

 

You may further config additional values in the config file and extend existing values or add new classes you may want to generated, example - a keyframe animation, a specefic class for an element or extending the container to a larger viewport.

Next
Browser support