Tailwind Config Generator

Create custom tailwind.config.js file

Settings

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
 darkMode: 'class',
 
 content: [
 './pages/**/*.{js,ts,jsx,tsx,mdx}',
 './components/**/*.{js,ts,jsx,tsx,mdx}',
 './app/**/*.{js,ts,jsx,tsx,mdx}',
 ],
 theme: {
 screens: {
 'sm': '640px',
 'md': '768px',
 'lg': '1024px',
 'xl': '1280px',
 '2xl': '1536px',
 },
 extend: {
 colors: {
 primary: '#3b82f6',
 secondary: '#10b981',
 },
 fontFamily: {
 sans: ['Inter', 'sans-serif'],
 },
 },
 },
 plugins: [],
}

Tailwind Config Generator - Generate custom tailwind.config.js file online

The Tailwind Config Generator tool helps you create a tailwind.config.js file with the most common customizations: custom colors (primary, secondary), font family, responsive breakpoints, dark mode, and prefix. Instead of having to read the documentation and write the config manually, you just need to adjust the visual options and copy the generated config. Especially useful when setting up a new project or needing to standardize Tailwind config for the team.

Outstanding features

Customize Primary and Secondary colors with color picker
Configure Font Family for typography
Adjust responsive Breakpoints (sm, md, lg, xl, 2xl)
Turn on/off Dark Mode with class strategy
Add Prefix for class names (avoid conflict)
Preview config realtime when changing
Copy config with one click
Standard configuration according to Tailwind CSS v3
Includes content paths for Next.js

Why do you need Tailwind Config Generator?

Tailwind CSS is the most popular CSS framework today, but customizing config can take time if you are not familiar with it. Each project often needs: custom brand colors, own font family, breakpoints suitable for the design. Instead of having to read docs and write config from scratch, this tool allows you to make intuitive adjustments and generate ready-to-use config. Especially useful for: (1) Quick new project setup; (2) Standardize configuration for the team; (3) Learn how to structure tailwind.config.js.

Benefits when used

  • •Save time setting up Tailwind
  • •No need to remember the config
  • •syntax Avoid typo errors in config
  • •Standardize config for team
  • •Learn Tailwind config through examples
  • •Config compatible with Tailwind v3

Instructions for using Tailwind Config Generator

  1. 1Choose Primary Color and Secondary Color for your brand
  2. 2Enter the Font Family you want to use (eg: Inter, Roboto)
  3. 3Adjust Breakpoints if needed to differ from default
  4. 4Turn on Dark Mode if the project needs to support
  5. 5Add Prefix if needed to avoid conflicts with other CSS
  6. 6Copy the config and paste it into the file tailwind.config.js

Cooperate immediately with Mavis Digital

We not only design websites, but also help businesses build strong digital brands. Providing comprehensive website design services from design to SEO optimization. Please contact Mavis Digital immediately to create breakthrough, effective and sustainable technology solutions for your business in Ho Chi Minh.