Configuration

/tailwind.config.js

Foundation Core uses a lightly customised Tailwind config file.

Colors

Colors for use in a project should be defined here.

const Colors = {

black: '#0B0B0B',

white: '#fff',

lightGrey: '#F5F5F5',

errorRed: '#aa0202',

red: '#e00303'

}

They can be accessed in css with either using tailwind's theme function:

p {

color: theme('colors.red');

}

or scss's map-get function.

p {

color: map-get($colors, 'red' );

}

CSS Purging

CSS purging is used to keep filesize down, it checks the twig files for in use classes. 

In the following the purger will find .grid .gap-sm but not md:grid-cols-1 md:grid-cols-2 etc.

<div class="grid gap-sm md:grid-cols-{{ categoryCount }} ">

To avoid purging of specific classes, either explicitly write the full class in the twig file:

{# md:grid-cols-2 md:grid-cols-3 md:grid-cols-4 #}

<div class="grid gap-sm md:grid-cols-{{ categoryCount }} ">

 or add it to the tailwind.config.js file in the purge section:

 purge: {

   enabled: true,   // Enabled in production by default, uncomment to enable purging in development

   content: [

     './templates/\*\*/*.twig',

     './src/js/\*\*/*.js',

   ],

   safelist:[

     'md:grid-cols-2',

     'md:grid-cols-3',

     'md:grid-cols-4'

   ]

 },