Выравнивание текста
Управляйте выравниванием текста элемента с помощью утилит .text-left , .text-center , .text-right и .text-justify .
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
p class="text-left . ">Lorem ipsum dolor sit amet . p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
p class="text-center . ">Lorem ipsum dolor sit amet . p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
p class="text-right . ">Lorem ipsum dolor sit amet . p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
p class="text-justify . ">Lorem ipsum dolor sit amet . p>Адаптивность
Чтобы управлять выравниванием текста элемента в определенной контрольной точке, добавьте префикс
p class="text-left md:text-center . ">Lorem ipsum dolor sit amet . p>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
Кастомизация
Варианты
По умолчанию, только responsive варианты создаются для утилит text alignment. Вы можете контролировать, какие варианты создаются для утилит text alignment для изменения свойства textAlign в разделе variants Вашего файла конфигурации tailwind.config.js . Например, эта конфигурация также будет генерировать варианты hover и focus :
// tailwind.config.js module.exports = variants: extend: // . + textAlign: [' hover ', ' focus '], > > >Отключение
Если Вы не планируете использовать в своем проекте утилиты для изменения text alignment , Вы можете полностью отключить их, установив для textAlign свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js module.exports = corePlugins: // . + textAlign: false, > >Выравнивание текста
Управляйте выравниванием текста элемента с помощью утилит text-left , text-center , text-right и text-justify .
Итак, я пошел в воду. Я не буду врать вам, мальчики, я был в ужасе. Но я продолжал настаивать, и когда я пробирался мимо прибоя, меня охватило странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но я говорю вам, Джерри, в тот момент я был морским биологом.
p class="text-left . ">Итак, я пошел в воду. p>Итак, я пошел в воду. Я не буду врать вам, мальчики, я был в ужасе. Но я продолжал настаивать, и когда я пробирался мимо прибоя, меня охватило странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но я говорю вам, Джерри, в тот момент я был морским биологом.
p class="text-center . ">Итак, я пошел в воду. p>Итак, я пошел в воду. Я не буду врать вам, мальчики, я был в ужасе. Но я продолжал настаивать, и когда я пробирался мимо прибоя, меня охватило странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но я говорю вам, Джерри, в тот момент я был морским биологом.
p class="text-right . ">Итак, я пошел в воду. p>Итак, я пошел в воду. Я не буду врать вам, мальчики, я был в ужасе. Но я продолжал настаивать, и когда я пробирался мимо прибоя, меня охватило странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но я говорю вам, Джерри, в тот момент я был морским биологом.
p class="text-justify . ">Итак, я пошел в воду. p>Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : text-center , чтобы применять утилиту text-center только при hover .
p class="text-left hover:text-center"> p> Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: text-center , чтобы применить утилиту text-center только на экранах среднего размера и выше.
p class="text-left md:text-center"> p> Copyright © 2023 Tailwind Labs Inc.
Text Alignment
Control the text alignment of an element using the .text-left , .text-center , .text-right , and .text-justify utilities.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
p class="text-left . ">Lorem ipsum dolor sit amet . p> p class="text-center . ">Lorem ipsum dolor sit amet . p> p class="text-right . ">Lorem ipsum dolor sit amet . p> p class="text-justify . ">Lorem ipsum dolor sit amet . p>Responsive
To control the text alignment of an element at a specific breakpoint, add a : prefix to any existing text alignment utility. For example, use md:text-center to apply the text-center utility at only medium screen sizes and above.
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
text-left sm:text-center md:text-right lg:text-justify xl:text-center . ">Lorem ipsum dolor sit amet .
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Customizing
Responsive and pseudo-class variants
By default, only responsive variants are generated for text alignment utilities.
You can control which variants are generated for the text alignment utilities by modifying the textAlign property in the variants section of your tailwind.config.js file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js module.exports = < variants : < // . - textAlign : ['responsive'] , + textAlign : ['responsive', 'hover', 'focus'] , > >Disabling
If you don’t plan to use the text alignment utilities in your project, you can disable them entirely by setting the textAlign property to false in the corePlugins section of your config file:
// tailwind.config.js module.exports = < corePlugins : < // . + textAlign : false , > >On this page
Text Align
Control the text alignment of an element using the text-left , text-center , text-right , and text-justify utilities.
So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
p class="text-left . ">So I started to walk into the water. p>So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
p class="text-center . ">So I started to walk into the water. p>So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
p class="text-right . ">So I started to walk into the water. p>So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
p class="text-justify . ">So I started to walk into the water. p>Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover : text-center to only apply the text-center utility on hover .
p class="text-left hover:text-center"> p> For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md: text-center to apply the text-center utility at only medium screen sizes and above.
p class="text-left md:text-center"> p> To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
Copyright © 2023 Tailwind Labs Inc.
Text Alignment
Control the text alignment of an element using the .text-left , .text-center , .text-right , and .text-justify utilities.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
p class="text-left . ">Lorem ipsum dolor sit amet . p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
p class="text-center . ">Lorem ipsum dolor sit amet . p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
p class="text-right . ">Lorem ipsum dolor sit amet . p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.
p class="text-justify . ">Lorem ipsum dolor sit amet . p>Responsive
To control the text alignment of an element at a specific breakpoint, add a
p class="text-left md:text-center . ">Lorem ipsum dolor sit amet . p>For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
Customizing
Variants
By default, only responsive variants are generated for text alignment utilities. You can control which variants are generated for the text alignment utilities by modifying the textAlign property in the variants section of your tailwind.config.js file. For example, this config will also generate hover and focus variants:
// tailwind.config.js module.exports = variants: extend: // . + textAlign: [' hover ', ' focus '], > > >Disabling
If you don’t plan to use the text alignment utilities in your project, you can disable them entirely by setting the textAlign property to false in the corePlugins section of your config file:
// tailwind.config.js module.exports = corePlugins: // . + textAlign: false, > >