Customize CSS

Even if you do not want to customize the theme, but only want to add some CSS for your custom HTML, use these steps. It’ll help you save some time setting up Tailwind for your site.

Setup the theme to be customized

In order to optimize for build speed and keep the requirements low to get started for most people, Lucid theme already ships with minified CSS.

The minified CSS that is used is at the below path.

themes/lucid/staic/css/lucid-theme.min.css

Enable setting to build CSS

In order to customize the CSS, the following option has to be enabled in the config.toml file. Under the [Params.Lucid] section add the following option.

customizeTheme = true

Install dependencies

Run the below command to install dependencies. Feel free to update versions if you are confident.

npm install autoprefixer@^10.2.5 \
    cssnano@^5.0.4 \
    postcss@^8.3.0 \
    postcss-cli@^8.3.1 \
    postcss-import@^14.0.2 \
    postcss-mixins@^8.0.0 \
    postcss-nested@^5.0.5 \
    tailwindcss@^2.1.2

Add TailwindCSS config to project

Create a file called tailwind.config.js in the root of your project and paste the following contents.

const process = require('process')

let purgeLookupPaths = [
  'themes/lucid/layouts/**/*.html',
  'layouts/**/*.html',
  'content/**/*.html'
]

module.exports = {
  purge: {
    // Set enabled to true if testing css purging in localhost
    // enabled: true,
    content: purgeLookupPaths,
    options: {
      safelist: ['dark'],
    },
  },
  darkMode: 'class', // 'media' or 'class' or false
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Nunito', 'sans-serif']
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Add PostCSS config to project

Create a file called postcss.config.js in the root of your project and paste the following contents

const process = require('process')
const lookupPaths = [
  process.cwd(),
  `${process.cwd()}/themes/lucid/assets/css`
]

module.exports = {
  plugins: [
    require('postcss-import')({path: lookupPaths}),
    require('postcss-mixins'),
    require('postcss-nested')({ bubble: ['phone'] }),
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano')({preset: 'default'}),
  ]
}

Info about what to change or where

The main file of the theme’s CSS is at the below path and that imports other files.

themes/lucid/assets/css/lucid-theme.css

All the colors are in the below file for ease of customization.

themes/lucid/assets/css/colors.css

Speed up slow CSS builds

When customizing the theme if you notice that the rebuild is slow for CSS changes, then do the following:

Disable or remove customizeTheme option from the config.toml file.
Run this command below in another terminal window to watch for changes and rebuild the CSS while you customize the theme.

NODE_ENV=production $(npm bin)/postcss \
./themes/lucid/assets/css/lucid-theme.css \
-o themes/lucid/static/css/lucid-theme.min.css -w

The minified file will be generated at the following path:

themes/lucid/staic/css/lucid-theme.min.css

If you go this route, you will have to commit the minified file to the repository to ensure that this is the one that goes into production.

Akash Manohar