1. Components
  2. Configuration

Customization

Tailwind CSS Configuration

A guide to configuring and customizing the default Preline UI and Tailwind CSS options and styles.

Make sure that the Preline UI is successfully installed as a plugin in your Tailwind CSS. If you haven't done so, you get started with our quick setup.

Content

You can add your style to the default set of utility classes from Preline UI and Tailwind CSS, by editing tailwind.config.js file from the root folder of your project where you can define any customizations. 

                
                  module.exports = {
                    // configure the paths to all of your source files
                    content: [
                      'node_modules/preline/dist/*.js',
                      './src/**/*.{html,js}',
                    ],

                    // enable dark mode via class strategy
                    darkMode: 'class',
                    
                    theme: {
                      extend: {
                        // extend base Tailwind CSS utility classes
                      },
                    },

                    // add plugins to your Tailwind CSS project
                    plugins: [
                      require('@tailwindcss/forms'),
                      require('preline/plugin')
                    ],
                  }

Theme

The theme section is where you define your color palette, fonts, type scale, border sizes, breakpoints — anything related to the visual design of your site. 

                
                  // tailwind.config.js
                  module.exports = {
                    // ...
                    theme: {
                      colors: {
                        'blue': '#1fb6ff',
                        'purple': '#7e5bef',
                        'pink': '#ff49db',
                        'orange': '#ff7849',
                        'green': '#13ce66',
                        'yellow': '#ffc82c',
                        'gray-dark': '#273444',
                        'gray': '#8492a6',
                        'gray-light': '#d3dce6',
                      },
                      fontFamily: {
                        sans: ['Graphik', 'sans-serif'],
                        serif: ['Merriweather', 'serif'],
                      },
                      extend: {
                        spacing: {
                          '8xl': '96rem',
                          '9xl': '128rem',
                        },
                        borderRadius: {
                          '4xl': '2rem',
                        }
                      }
                    }
                  }

Plugins

The plugins section allows you to register plugins. 

                
                  // tailwind.config.js
                  module.exports = {
                    plugins: [
                      require('@tailwindcss/forms'),
                      require('preline/plugin'),
                      // ...
                    ],
                  }

Presets

The presets section allows you to specify your own custom base configuration. 

                
                  // tailwind.config.js
                  module.exports = {
                    presets: [
                      require('@acmecorp/base-tailwind-config')
                    ],

                    // Project-specific customizations
                    theme: {
                      //...
                    },
                    // ...
                  }

Prefix

The prefix option allows you to add a custom prefix to all of Preline UI and Tailwind's generated utility classes.

For example, you could add a hs- prefix by setting the prefix option like so: 

                
                  // tailwind.config.js
                  module.exports = {
                    prefix: 'hs-',
                  }

Now every class will be generated with the configured prefix: 

                
                  .hs-text-start {
                    text-align: left;
                  }
                  .hs-text-center {
                    text-align: center;
                  }
                  .hs-text-end {
                    text-align: right;
                  }
                  /* etc. */

For more information, visit the official Tailwind CSS configuration.