Customization

Configuration

A guide to configuring and customizing your Tailwind installation.

Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind.

By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.

/** @type {import('tailwindcss').Config} */
                  module.exports = {
                  content: ['./src/**/*.{html,js}'],
                  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',
                  }
                  }
                  },
                  }

Creating your configuration file

Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package: 

npx tailwindcss init

This will create a minimal tailwind.config.js file at the root of your project:

/** @type {import('tailwindcss').Config} */
                  module.exports = {
                  content: [],
                  theme: {
                  extend: {},
                  },
                  plugins: [],
                  }

Using a different file name

To use a name other than tailwind.config.js, pass it as an argument on the command-line:

npx tailwindcss init tailwindcss-config.js

When you use a custom file name, you will need to specify it as a command-line argument when compiling your CSS with the Tailwind CLI tool:

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

Alternatively, you can specify your custom configuration path using the @config directive:

@config "./tailwindcss-config.js";
                  @tailwind base;
                  @tailwind components;
                  @tailwind utilities;

Content

You can add your style to the default set of utility classes from Pagedone 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/pagedone/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('pagedone/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('pagedone/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 Pagedone 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.