How to Use Tailwind Config to Customize Theme Styles

Category: Business

Would you like to learn how to create or access the default Tailwind config file? Creating a tailwind.config.js file lets you extend the functionality of Tailwind by adding custom utilities and styles specific to your brand. In this tutorial, we’ll cover the basics of Tailwind CSS and how the configuration file works. Then, we’ll show how to generate and use the tailwind.config.js file for your web project. Excited? Let’s get started. What is Tailwind CSS? Tailwind is a lightweight CSS framework that provides utility classes to easily add styles to CSS TAILWIND 29 Sep 2023 10 min read HTML elements on your web page. It works similarly to Bootstrap and Material UI. However, Tailwind CSS offers more flexibility in customizing styles and elements. To get started with Tailwind CSS, you’ll need to install the library on your system. We use Node package manager (npm) for the installation. So, you’ll also need Node.js installed on your system. Once Node is installed on your machine, open a terminal window and navigate into the directory you wish to install Tailwind CSS. Then run the command below: npm install -D tailwindcss You should get a success notification once the installation is completed. Before you can start using the utility classes tailwind provides, you’ll need to import Tailwind into your CSS file. Note: For a more detailed guide, we suggest reviewing the official Tailwind documentation. Overview of Tailwind Config Tailwind Config is the configuration file containing all the theme styles Tailwind provides. When you add a Tailwind CSS class to your HTML template, it retrieves the required utility classes under the hood from the tailwind.config.js file. The config file contains the font styles, font family, sizes, and theme colors from the Tailwind library. Whenever you run a program that uses Tailwind CSS, it will first check the root of your project for a config file. If you haven’t generated your configuration file, Tailwind will default to the default configuration. Creating Your Configuration File: How Do We Configure Tailwind? Once Tailwind is installed on your system, you can use the tailwindcss command line utility to generate a configuration file for your project. Prerequisites Before diving into Tailwind config, you’ll need to have: Working knowledge of HTML and CSS. Tailwind CSS project setup. Using the Default Filename To generate a config file using the default file name, run the code below in a terminal window of your project’s root directory: npx tailwindcss init The code above will generate a basic building block for the Tailwind config in the root directory of your project. /** @type {import('tailwindcss').Config} */ module.exports = { content: [], theme: { extend: {}, }, plugins: [], } In the content section, you’ll need to add the path to your HTML templates. Essentially, the file(s) that will be using the CSS utility classes. For this example, we’ll set it to look for HTML and JavaScript files in the src folder. But you’ll need to update this path to match your projects’ directory. /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,js}'], theme: { extend: {}, }, plugins: [], } If you’d like to scaffold the default configuration file Tailwind uses, run the command below: npx tailwindcss init --full This code generates the complete configuration file and prefills it with Tailwind’s generated utility classes. Once the file is generated, you can override the styles or add your own custom utilities to it. Note: We strongly advise against scaffolding the default Tailwind config. This is because it makes it difficult to keep track of the custom classes that is not tailwind’s utilities. So, when generating the configuration file, be sure to use the blank file option. Using a Different Filename If you’d like to use a different filename for your Tailwind config, simply add the file name after the init command. Here is an example code. Be sure to replace custom-config.js with the name you’d like to use. npx tailwindcss init custom-config.js After generating the custom Tailwind config, you’ll need to register the file path to the config in your input.css so Tailwind can locate the file. For this, add the code below. // input.css @config "./custom-config.js"; ... Ensure you replace the example file path above with your custom Tailwind configuration path. Customizing Tailwind Config File In this section, we’ll cover the basic usage of the Tailwind CSS configuration we generated above. As a rule of thumb, if you want to extend the utility classes Tailwind provides, you’ll need to add your custom styles to the ‘extend’ block in Tailwind config. However, if you wish to override the default CSS utility, add your custom styles to the Tailwind configuration’s theme object. Adding or Removing Utilities In the tailwind.config.js file, you can add and remove utility classes for your project. For instance, you can specify the default sizes for each screen size using the ‘screens’ object. Here is an example implementation to override the default breakpoints. // tailwind.config.js module.exports = { // ... theme: { screens: { sm: '480px', md: '768px', lg: '976px', xl: '1440px', 2xl: '1760', }, extend: {}, }, // ... } The code above will modify the default screen option Tailwind provides. You can add as many breakpoints as you need for your project and use any name you like for the screen size. The value you specify will be used as minimum width utilities for each breakpoint. For example, the min width for the ‘md’ breakpoint in our case is ‘768px’. Here’s an example of how these classes work in your template; Removing/Disabling Utilities In the Tailwind config, you can also disable specific core plugins from your project. The ‘corePlugins’ section lets you specify Tailwind’s utility classes to remove from your project. This can be a useful practice when optimizing your code for production. To disable specific core plugins, specify the utility class name in the ‘corePlugins’ object and set the value to false. Here is an example code to disable the float utilities. // tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { // ... corePlugins: { float: false, objectFit: false, objectPosition: false, } } If you’d like to only allow specific utility classes for your project, you can specify a safelist using the ‘corePlugins’ as an array. Here is an example code that only allows padding, margin, and background color utilities. /** @type {import('tailwindcss').Config} */ module.exports = { corePlugins: [ 'margin', // padding utilities 'padding', // padding utilities 'backgroundColor', // background color utilities // ... ] } Note: You can add as many utility classes as you need in the ‘corePlugins’ array. Only these classes will be exported to your output.css file. Tailwind config also allows you to disable all utility classes. This means you’re using Tailwind as a building block for your project. But you won’t be able to use any utility classes Tailwind provides. To disable all utilities, add an empty array in the ‘corePlugins’ section. // tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { corePlugins: [] // disables all utility classes } Now you know how to add and remove utility classes in Tailwind config. Let’s explore how to add colors and custom fonts. Modifying Colors With the Tailwind configuration, you can define the colors you want for your web project. To register your custom colors, add the colors property within the extend section. For our example, we’ll register a brand color and add three variants of this color to the Tailwind config. // tailwind.config.js module.exports = { // ... theme: {}, extend: { colors: { brand: '#add4ed' // Add brand color }, }, // ... } You can also define custom color shades and use them in your styles. For example, let’s update the code above with 3 variants of the brand color. So, instead of adding the hex value for the brand color, we’ll convert it into an object and enter the 3 colors as parameters for the brand object. // tailwind.config.js module.exports = { // ... theme: {}, extend: { colors: { brand: { light: '#58a7db', dark: '#013c63', neutral: '#add4ed' }, }, }, // ... } When you build your CSS, these custom colors will be added to your output.css file. Tailwind will generate utilities for text colors, background colors, etc., based on your defined custom classes. In your HTML template, you can use the text-brand-light or bg-brand-dark CSS classes, which will apply the color we defined in the tailwind.config.css file. Note: The object name we specified in Tailwind config is what is used for the Tailwind class names. You can replace ‘brand’ with any name you like. Just make sure the class name you add to your template matches the utility class name you defined. Typography and Spacing Typography controls the font sizes of elements on your web page. Although Tailwind CSS provides custom utility classes that control font sizes, you can build on this and define custom sizes for your project. Typography and spacing classes are added within the extend block in the tailwind.config.js file. Here is an example. // tailwind.config.js module.exports = { // ... theme: {}, extend: { fontSize: { 'extreme': '8rem', // Define a custom font size }, spacing: { '96': '24rem', // Define a custom spacing value }, }, // ... } Within the fontSize element, you can define unlimited sizes as you need for your project. The name ‘extreme’ can be any string value you like. This is the name you’ll add to the class name when using the custom utility you created. Here is an example of using the extreme class we created.

This is a very large text

Adding Custom Fonts In Tailwind config, you can define font family utilities for your project. Before registering a font, you’ll need to import the font into the input.css file. For example, say we want to use the Nunito font family for our project. The first step is to add it as an import to the input.css file. After importing the font, you’ll need to register it as a font in your Tailwind config file configuration. Let’s modify our Tailwind config to include the imported font. // tailwind.config.js module.exports = { // ... theme: {}, extend: { colors: { brand: { light: '#58a7db', dark: '#013c63', neutral: '#add4ed' }, }, fontFamily: { temp: ['Nunito'], // Use anything you like as the array name }, }, // ... } We use the fontFamily object to register custom fonts. You can name the array anything you like. Just make sure the font family is added as a value in the array. In your page template, you’ll use the name entered as the class name for the font. Here is an example. ... Adding this class will update your web page’s template to use the Nunito font we imported. Tailwind config supports unlimited customizations for almost any part or element on your web page. You can define custom border radius utilities, display utilities, animation utilities, etc. You just need to ensure you enter the correct object for the utility you want to modify or extend. For example, to extend the border radius utility, you’ll need to use ‘borderRadius’ as the object in the tailwind.config.js file. Advanced Tailwind Config Technique Using Variants Tailwind CSS allows you to target specific variants, such as hover, focus, and responsive classes. Here’s an example of targeting a specific screen size: // tailwind.config.js module.exports = { // ... variants: { extend: { textColor: ['hover'], // Apply text color on hover borderWidth: ['first'], // Apply border width to the first child }, }, // ... } If you’re using Tailwind CSS v3.0, every variant is automatically available for every utility by default. So you can remove the variants section from your tailwind.config.js file and it would still work as intended. Optimizing For Production When you add custom utility classes to your Tailwind project, each of the Tailwind class names generate extra utilities in your output CSS file. In most cases, these extra utility classes may not be needed for your project, especially if you just want to change the text and background color. This is where optimizing your code comes into play. One essential optimization technique is purging unused styles. When you purge unused styles, only those used on your HTML template will be exported. To purge the configuration cache, add the purge option to the tailwind.config.js file. // tailwind.config.js module.exports = { // ... purge: ['./src/**/*.html', './src/**/*.js'], // Paths to your project files // ... } The code above reduces the size of the site files when you run the build command. This, in turn, increases the loading speed of the webpage. Extending the Configuration Earlier, we mentioned that Tailwind is a utility-based CSS framework that provides classes to build web interfaces faster. In addition to the default classes, you can install and use plugins to extend the features and utility classes Tailwind provides. Tailwind Config Plugins: How do I Add plugins to Tailwind Config? Tailwind CSS is a utility-based frontend framework that provides plugins that can extend its functionality. You can install and configure plugins to add new utility classes, components, or features to your project. For instance, the Typography plugin adds typography-related utility classes. To install this plugin, run the command below in your terminal window. npm install @tailwindcss/typography Once the installation completes, you’ll need to register it as a plugin in the configuration file. // tailwind.config.js module.exports = { // ... plugins: [ require('@tailwindcss/typography'), // Add other plugins as needed ], // ... } Note: Any plugin you install would need to be added as a requirement in the plugins section of the tailwind.config.js file. There are other plugins from Tailwind developers that you could use to add functionalities to your web project. For example, there are plugins for forms, container queries, and adding aspect ratios to your web page. Third-party Integration for Tailwind Config In addition to official plugins, third-party packages can enhance your Tailwind CSS experience. Examples include Purecode AI, which provides pre-designed AI-generated components, and various theme packages that offer pre-configured styles. Get Started With Purecode Other Tailwind CSS 3rd-party components to integrate with your project: daisyUI MambaUI Tailwind Elements Frequently Asked Questions These are answers to some top questions about using the Tailwind config. Where is Tailwind config file? By default, the Tailwind CSS configuration file sits under the hood until you initialize it using the Tailwind CLI utility included with every Tailwind CSS project. After initializing it, you can then define your own utilities within the tailwind.config.js file. How do you use Tailwind config in React? Tailwind config can be added to a React project similar to how you would a vanilla web project. If you’ve installed Tailwind CSS, simply run the npx tailwindcss init command in the root directory of your project. How do I add plugins to Tailwind config? Tailwind provides many plugins to extend the functionality of the framework. To add a plugin to the tailwind.config.js file, you’ll first need to make sure the plugin is installed in your project’s directory. After installing the plugin, you’ll then need to register it in the config file under the plugins section. For more details, see the plugins section of this guide. What is Tailwind preset? The Presets option specifies different configurations to use as the base instead of the default tailwind config. It also helps you organize customizations you want to use across projects. Related Content If you’d like to learn more about using Tailwind for your project, check out the following tutorials: 1. Understanding how Tailwind width works 2. Ultimate guide to Tailwind colors 3. How to create and use carousels in Tailwind Conclusion A utility-based CSS framework gives you more customization options when building your web project. Thus, the Tailwind config file makes extending the default utility classes easy. In this tutorial, we covered how to generate and use the Tailwind configuration file. As a reminder, only add your custom code to the Tailwind configuration’s theme object if you wish to override any default utility Tailwind provides. If you want to improve your team’s workflow, check out some of our custom templates that help reduce development time. Purecode provides over 10k templates to integrate into your project running on libraries such as Tailwind CSS and Material UI. Access Purecode’s Tailwind Components ‘Original article published here’