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