Tailwind CSS Hyphens

The hyphens CSS property controls how text is split across lines, primarily affecting the word-breaking behavior of long words within content blocks. Using this property, you can decide whether to prohibit hyphenation (none), allow manual hyphenation via soft hyphens (manual), or automatically enable hyphenation based on language and browser capabilities (auto). Tailwind CSS incorporates utilities for managing these hyphenation settings seamlessly. Whether you're building responsive designs or focusing on accessibility and readability, Tailwind's hyphens utilities provide flexible options to manage word-breaking in your applications.

In this guide, you will learn about adding hyphenation control, how to make them state- and breakpoint-specific, and more.

Class	Properties	Example
`hyphens-none`	`hyphens: none;`	`<div className="hyphens-none"></div>`
`hyphens-manual`	`hyphens: manual;`	`<div className="hyphens-manual"></div>`
`hyphens-auto`	`hyphens: auto;`	`<div className="hyphens-auto"></div>`

Overview of Hyphens

Tailwind CSS offers three utility classes to configure hyphenation behavior. These reflect the CSS values of the same name: none, manual, and auto. Below is an explanation of each along with a usage snippet.

Disabling the Hyphens

The hyphens-none class disables hyphenation entirely, ensuring words remain unbroken on line wraps, even when too long to fit.

This is a live editor. Play around with it!

export default function NoHyphenation() {
  return (
    <div className="w-screen h-screen bg-gray-100 flex items-center justify-center">
      <p className="hyphens-none text-lg w-96 bg-white p-6 border rounded-md shadow">
        {/* hyphens: none */}
        You can see here that evenextremelylongwordswithnospaceswilnot be broken or hyphenated in any way across lines.
      </p>
    </div>
  );
}

Manual Hyphenation

Use hyphens-manual to enable manual hyphenation. If the content contains soft hyphens (), those words will break appropriately at the designated points.

This is a live editor. Play around with it!

export default function ManualHyphenation() {
  return (
    <div className="w-screen h-screen bg-gray-100 flex items-center justify-center">
      <p className="hyphens-manual text-lg w-96 bg-white p-6 border rounded-md shadow">
        {/* hyphens: manual */}
        This text with extremelylongwordswith&shy;nospaces is now broken because of soft hyphen.
      </p>
    </div>
  );
}

Automatic Hyphenation

The hyphens-auto utility lets the browser handle hyphenation automatically based on language and context.

This is a live editor. Play around with it!

export default function AutoHyphenation() {
  return (
    <div className="w-screen h-screen bg-gray-100 flex items-center justify-center">
      <p className="hyphens-auto text-lg w-96 bg-white p-6 border rounded-md shadow">
        {/* hyphens: auto */}
        Automatic hyphenation ensures that the words break naturallywhereverneeded. This behavior is highly dependent on the browser and the language being used.
      </p>
    </div>
  );
}

States and Responsiveness

Beyond basic hyphenation settings, Tailwind allows conditional application of hyphenation utilities. You can style based on states (e.g., hover, focus) or responsive breakpoints using Tailwind's built-in modifiers.

Hover and Focus States

You can apply different hyphenation styles dynamically based on user interaction, such as when hovering over or focusing on an element.

Dynamic Hover Behavior

This is a live editor. Play around with it!

export default function HoverHyphenation() {
  return (
    <div className="w-screen h-screen bg-gray-100 flex items-center justify-center">
      <p className="text-lg w-96 bg-white p-6 border rounded-md shadow hyphens-auto hover:hyphens-none">
        {/* Default: hyphens auto */}
        {/* On Hover: hyphens none */}
        Hover over this text to see how hyphenation changes dynamically based on user interaction.
      </p>
    </div>
  );
}

Focus-Based Hyphenation

This is a live editor. Play around with it!

export default function FocusHyphenation() {
  return (
    <div className="w-screen h-screen bg-gray-100 flex items-center justify-center">
      <textarea
        className="hyphens-auto focus:hyphens-none text-base w-96 bg-white p-4 border rounded"
        placeholder="Focus on this input to toggle hyphenation behavior dynamically."
      />
    </div>
  );
}

Breakpoint Modifiers

Responsive design is crucial for modern web applications. By combining breakpoint modifiers, you can define hyphenation behavior across different screen sizes.

This is a live editor. Play around with it!

export default function ResponsiveHyphenation() {
  return (
    <div className="w-screen h-screen bg-gray-50 flex items-center justify-center">
      <p className="text-lg w-96 bg-white p-6 border rounded hyphens-auto sm:hyphens-manual md:hyphens-none lg:hyphens-auto">
        {/* Default: hyphens auto */}
        {/* Small (sm): hyphens manual */}
        {/* Medium (md): hyphens none */}
        {/* Large (lg): hyphens auto */}
        Resize the window to see how hyphenation behavior changes depending on the breakpoint.
      </p>
    </div>
  );
}

Real World Examples

Product Reviews with Multiple Language Support

This component displays customer reviews in multiple languages, using appropriate hyphenation for better text wrapping and readability.

This is a live editor. Play around with it!

export default function MultiLanguageReviews() {
  const reviews = [
    {
      id: 1,
      text: "Diese außergewöhnliche Kameraqualität übertrifft alle meine Erwartungen.",
      language: "de",
      author: "Hans Schmidt",
      rating: 5,
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
    },
    {
      id: 2,
      text: "L'extraordinaire qualité de fabrication justifie totalement l'investissement.",
      language: "fr",
      author: "Marie Dubois",
      rating: 4,
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80"
    },
    {
      id: 3,
      text: "Högkvalitativ konstruktion och enastående prestanda för priset.",
      language: "sv",
      author: "Erik Larsson",
      rating: 5,
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e"
    },
    {
      id: 4,
      text: "Extraordinária qualidade de construção e desempenho excepcional.",
      language: "pt",
      author: "Ana Silva",
      rating: 4,
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330"
    },
    {
      id: 5,
      text: "Eccezionale qualità costruttiva e prestazioni straordinarie.",
      language: "it",
      author: "Marco Rossi",
      rating: 5,
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d"
    },
    {
      id: 6,
      text: "Excepcional calidad de construcción y rendimiento sobresaliente.",
      language: "es",
      author: "Carlos Rodriguez",
      rating: 5,
      avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d"
    }
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 p-2">
      {reviews.map((review) => (
        <div key={review.id} className="bg-white rounded-lg shadow-md p-4 w-40">
          <div className="flex items-center mb-2">
            <img
              src={review.avatar}
              alt={review.author}
              className="w-12 h-12 rounded-full mr-4"
            />
            <div>
              <h4 className="font-semibold">{review.author}</h4>
              <div className="flex text-yellow-400">
                {[...Array(review.rating)].map((_, i) => (
                  <span key={i}>★</span>
                ))}
              </div>
            </div>
          </div>
          <p className={`text-gray-700 hyphens-auto ${
            review.language === 'de' ? 'lang-de' : 
            review.language === 'fr' ? 'lang-fr' :
            review.language === 'sv' ? 'lang-sv' :
            review.language === 'pt' ? 'lang-pt' :
            review.language === 'it' ? 'lang-it' : 'lang-es'
          }`}>
            {review.text}
          </p>
        </div>
      ))}
    </div>
  );
}

This component shows a technical documentation sidebar with proper hyphenation for long technical terms.

This is a live editor. Play around with it!

export default function TechnicalDocSidebar() {
  const docSections = [
    {
      id: 1,
      title: "Implementation-Configuration-Documentation",
      subsections: ["Initial-Setup", "Advanced-Configuration", "Troubleshooting"]
    },
    {
      id: 2,
      title: "Authentication-Authorization-Management",
      subsections: ["User-Authentication", "Role-Based-Access", "Security-Policies"]
    },
    {
      id: 3,
      title: "Database-Integration-Guidelines",
      subsections: ["Connection-Setup", "Query-Optimization", "Migration-Strategies"]
    },
    {
      id: 4,
      title: "Performance-Optimization-Techniques",
      subsections: ["Caching-Mechanisms", "Load-Balancing", "Resource-Management"]
    },
    {
      id: 5,
      title: "Deployment-Infrastructure-Setup",
      subsections: ["Container-Orchestration", "CI/CD-Pipeline", "Monitoring-Tools"]
    },
    {
      id: 6,
      title: "API-Development-Standards",
      subsections: ["REST-Guidelines", "GraphQL-Implementation", "Version-Control"]
    }
  ];

  return (
    <div className="w-64 bg-gray-100 p-4">
      <nav>
        {docSections.map((section) => (
          <div key={section.id} className="mb-4">
            <h3 className="text-sm font-bold text-gray-700 hyphens-auto mb-2">
              {section.title}
            </h3>
            <ul className="pl-4">
              {section.subsections.map((subsection, index) => (
                <li 
                  key={index}
                  className="text-sm text-gray-600 hyphens-auto hover:text-blue-600 cursor-pointer mb-1"
                >
                  {subsection}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </nav>
    </div>
  );
}

Scientific Article Preview

This component displays scientific article previews with proper hyphenation for scientific terms.

This is a live editor. Play around with it!

export default function ScientificArticles() {
  const articles = [
    {
      id: 1,
      title: "Quantum-Entanglement-Phenomena",
      abstract: "Experimental-validation of quantum-mechanical-principles in particle-physics.",
      author: "Dr. Michael Chen",
      journal: "Physics-Review",
      image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb"
    },
    {
      id: 2,
      title: "Molecular-Structure-Analysis",
      abstract: "Computational-methods for protein-folding-prediction in biochemistry.",
      author: "Dr. Emma Williams",
      journal: "Biochemistry-Today",
      image: "https://images.unsplash.com/photo-1532187863486-abf9dbad1b69"
    },
    {
      id: 3,
      title: "Climate-Change-Implications",
      abstract: "Assessment of atmospheric-carbon-dioxide levels and global-warming-patterns.",
      author: "Dr. James Anderson",
      journal: "Environmental-Science",
      image: "https://images.unsplash.com/photo-1611273426858-450d8e3c9fce"
    },
    {
      id: 4,
      title: "Artificial-Intelligence-Ethics",
      abstract: "Philosophical-implications of machine-learning-algorithms in decision-making.",
      author: "Dr. Lisa Martinez",
      journal: "AI-Ethics-Review",
      image: "https://images.unsplash.com/photo-1620712943543-bcc4688e7485"
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {articles.map((article) => (
        <div key={article.id} className="bg-white rounded-xl shadow-lg overflow-hidden">
          <img 
            src={article.image} 
            alt={article.title}
            className="w-full h-48 object-cover"
          />
          <div className="p-6">
            <h3 className="text-xl font-bold text-gray-800 hyphens-auto mb-2">
              {article.title}
            </h3>
            <p className="text-sm text-gray-600 hyphens-auto mb-4">
              {article.abstract}
            </p>
            <div className="flex justify-between items-center">
              <span className="text-sm text-blue-600">{article.author}</span>
              <span className="text-xs text-gray-500">{article.journal}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Chemical Compound Cards

This component displays chemical compound information with proper hyphenation for chemical names.

This is a live editor. Play around with it!

export default function ChemicalCompounds() {
  const compounds = [
    {
      id: 1,
      name: "Methylenedioxymethamphetamine",
      formula: "C11H15NO2",
      category: "Organic-Compounds",
      structure: "https://images.unsplash.com/photo-1532634993-15f421e42ec0",
      properties: ["Crystalline-Powder", "Water-Soluble", "Heat-Sensitive"]
    },
    {
      id: 2,
      name: "Dichlorodiphenyltrichloroethane",
      formula: "C14H9Cl5",
      category: "Organochlorides",
      structure: "https://images.unsplash.com/photo-1532634993-15f421e42ec0",
      properties: ["Colorless-Crystal", "Fat-Soluble", "Persistent-Organic-Pollutant"]
    },
    {
      id: 3,
      name: "Tetrahydrocannabinol",
      formula: "C21H30O2",
      category: "Cannabinoids",
      structure: "https://images.unsplash.com/photo-1532634993-15f421e42ec0",
      properties: ["Lipophilic", "Psychoactive", "Temperature-Sensitive"]
    },
    {
      id: 4,
      name: "Ethylenediaminetetraacetic",
      formula: "C10H16N2O8",
      category: "Amino-Acids",
      structure: "https://images.unsplash.com/photo-1532634993-15f421e42ec0",
      properties: ["Chelating-Agent", "Water-Soluble", "pH-Dependent"]
    },
    {
      id: 5,
      name: "Polytetrafluoroethylene",
      formula: "C2F4",
      category: "Fluoropolymers",
      structure: "https://images.unsplash.com/photo-1532634993-15f421e42ec0",
      properties: ["Heat-Resistant", "Chemical-Inert", "Low-Friction"]
    },
    {
      id: 6,
      name: "Deoxyribonucleic-Acid",
      formula: "C15H31N3O13P2",
      category: "Nucleic-Acids",
      structure: "https://images.unsplash.com/photo-1532634993-15f421e42ec0",
      properties: ["Double-Helix", "Self-Replicating", "Genetic-Material"]
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 bg-gray-100">
      {compounds.map((compound) => (
        <div key={compound.id} className="bg-white rounded-lg shadow-md overflow-hidden">
          <img 
            src={compound.structure} 
            alt={compound.name}
            className="w-full h-48 object-cover"
          />
          <div className="p-4">
            <h3 className="text-lg font-bold text-gray-800 hyphens-auto mb-2">
              {compound.name}
            </h3>
            <p className="text-sm text-gray-600 mb-2">Formula: {compound.formula}</p>
            <p className="text-sm text-blue-600 hyphens-auto mb-3">
              Category: {compound.category}
            </p>
            <div className="space-y-2">
              {compound.properties.map((property, index) => (
                <span 
                  key={index}
                  className="inline-block bg-gray-200 rounded-full px-3 py-1 text-xs text-gray-700 mr-2 hyphens-auto"
                >
                  {property}
                </span>
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Mathematical Theorem Cards

This component displays mathematical theorems with proper hyphenation for mathematical terms.

This is a live editor. Play around with it!

export default function MathematicalTheorems() {
  const theorems = [
    {
      id: 1,
      title: "Pythagorean-Theorem",
      statement: "Right-angled-triangles satisfy a²+b²=c²",
      field: "Euclidean-Geometry",
      complexity: "Elementary-Mathematics",
      icon: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb"
    },
    {
      id: 2,
      title: "Fundamental-Theorem-of-Calculus",
      statement: "Integration-and-differentiation are inverse-operations",
      field: "Mathematical-Analysis",
      complexity: "Advanced-Calculus",
      icon: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb"
    },
    {
      id: 3,
      title: "Riemann-Hypothesis",
      statement: "Non-trivial zeros of zeta-function have real-part 1/2",
      field: "Number-Theory",
      complexity: "Research-Level",
      icon: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb"
    },
    {
      id: 4,
      title: "Euler-Identity",
      statement: "Complex-exponential relationship e^(iπ)+1=0",
      field: "Complex-Analysis",
      complexity: "Undergraduate-Level",
      icon: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb"
    },
    {
      id: 5,
      title: "Fermat-Last-Theorem",
      statement: "No three positive-integers satisfy x^n+y^n=z^n for n>2",
      field: "Algebraic-Number-Theory",
      complexity: "Research-Level",
      icon: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb"
    },
    {
      id: 6,
      title: "Gauss-Bonnet-Theorem",
      statement: "Total-curvature relates to Euler-characteristic",
      field: "Differential-Geometry",
      complexity: "Graduate-Level",
      icon: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb"
    }
  ];

  return (
    <div className="bg-gray-100 p-8">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {theorems.map((theorem) => (
          <div key={theorem.id} className="bg-white rounded-xl shadow-lg p-6">
            <div className="flex items-center mb-4">
              <img 
                src={theorem.icon} 
                alt={theorem.title}
                className="w-12 h-12 rounded-full mr-4"
              />
              <h3 className="text-xl font-bold text-gray-800 hyphens-auto">
                {theorem.title}
              </h3>
            </div>
            <p className="text-gray-600 hyphens-auto mb-4">
              {theorem.statement}
            </p>
            <div className="space-y-2">
              <div className="flex items-center">
                <span className="text-sm font-semibold text-gray-700 mr-2">Field:</span>
                <span className="text-sm text-blue-600 hyphens-auto">
                  {theorem.field}
                </span>
              </div>
              <div className="flex items-center">
                <span className="text-sm font-semibold text-gray-700 mr-2">Complexity:</span>
                <span className="text-sm text-green-600 hyphens-auto">
                  {theorem.complexity}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

When applying hyphenation utilities like hyphens-none, hyphens-auto, or hyphens-manual in Tailwind CSS, consistency is crucial for maintaining a polished design. For example, ensure uniform hyphenation rules across all interactive and static text elements within the same section of your application. A frequently inconsistent use of these classes may result in discrepancies, such as text breaking inconsistencies between components.

You can achieve consistency by abstracting text styling with hyphens into reusable Tailwind utility classes or components.

Leverage Utility Combinations

Tailwind CSS encourages composability, allowing developers to chain utilities for more nuanced designs. Combining hyphens with spacing, typography, and alignment utilities can enhance readability and responsiveness. For instance, integrate line-height, text-justify, and padding utilities alongside hyphens-auto for fluid layouts.

This is a live editor. Play around with it!

export default function UtilityCombination() {
  return (
    <div className="bg-gray-100 p-6 rounded-lg shadow-lg">
      <h2 className="text-xl font-bold mb-4 hyphens-auto">
        Efficiently Combining Utilities
      </h2>
      <p className="hyphens-auto leading-relaxed text-justify px-4">
        By strategically applying multiple utilities, developers can craft visually appealing, scalable layouts that remain performant. Combined with hyphenation utilities, thoughtful utility use minimizes styling conflicts and enhances accessibility.
      </p>
    </div>
  );
}

Accessibility Considerations

Enhance Readability and Navigability

Hyphenation utilities improve content clarity, especially for users navigating long-form text or multilingual content. When applied thoughtfully, these utilities increase the fluidity of content flow, making it easier for assistive technologies like screen readers to parse and vocalize text.

Support Accessible Interactive Elements

Interactive elements, such as tooltips or modal descriptions, benefit from hyphenation. This ensures that toggled content adapts smoothly without breaking or distorting its structure, even when descriptive text becomes lengthy.

List Style Type Whitespace

Tailwind CSS Hyphens

Overview of Hyphens

Disabling the Hyphens

Manual Hyphenation

Automatic Hyphenation

States and Responsiveness

Hover and Focus States

Dynamic Hover Behavior

Focus-Based Hyphenation

Breakpoint Modifiers

Real World Examples

Product Reviews with Multiple Language Support

Technical Documentation Sidebar

Scientific Article Preview

Chemical Compound Cards

Mathematical Theorem Cards

Best Practices

Maintain Design Consistency

Leverage Utility Combinations

Accessibility Considerations

Enhance Readability and Navigability

Support Accessible Interactive Elements