Now, let's quickly review the other useful customization options in the configuration.
If you want to introduce a new color to the default palette, include it in your configuration file theme.extend.colors section.
tailwind.config.js
import colors from 'tailwindcss/colors'; // ...export default { // ... theme: { colors: { extend: { 'accent': colors.amber, 'primary': '#5164f7', 'saffron': { '50': '#fefbe8', '100': '#fdf7c4', '200': '#fceb8c', '300': '#f9d94b', '400': '#f5c211', '500': '#e5ac0d', '600': '#c68508', '700': '#9e5e0a', '800': '#834a10', '900': '#6f3d14', '950': '#411f07' } } } }, // ...That allows you to:
accent, then you're able to use text-accent, bg-accent classesprimary color, and text-primary, bg-primary becomes available to usetext-saffron-300, bg-saffron-900 etc.In the editor, it may look like this:
You can also include all available Tailwind colors at once:
tailwind.config.js
import colors from 'tailwindcss/colors'; // ...export default { // ... theme: { colors: { extend: { ...colors } } }, // ...The Tailwind CSS Color Generator helps generate color objects and is a valuable tool.
Let's add some custom Roboto fonts from Google Fonts library. Include provided font <link> tags into <head> section of your HTML:
<head> <!-- ... --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"></head>Then add the theme.extend.fontFamily section into config:
tailwind.config.js
// ...theme: { extend: { // ... fontFamily: { sans: ['Roboto', ...defaultTheme.fontFamily.sans], }, },},You can add plugins to extend your TailwindCSS installation further.
For instance, the official @tailwindcss/forms plugin adds a form reset layer, simplifying the styling of form elements using utility classes. It is included by default with the Laravel Breeze starter kit.
tailwind.config.js
import forms from '@tailwindcss/forms'; // ... export default { // ... plugins: [forms],};Another example is the @tailwindcss/typography plugin, which introduces a set of prose classes for applying typographic styles to content blocks sourced from formats like markdown or a CMS database.
Let's see that in action, first install the plugin via npm:
npm install @tailwindcss/typography --save-devAnd add this plugin to the config.
tailwind.config.js
import typography from '@tailwindcss/typography'; // ... export default { // ... plugins: [ forms, typography ],};Now, we can apply a single prose class to the whole HTML section to style it.
<article class="prose"> <h1>Exploring the Vast Unknown: A Journey into the Cosmos</h1> <p> Space, the seemingly infinite expanse surrounding our planet, has long captivated the human imagination. </p> <p> From the mesmerizing dance of celestial bodies to the mysteries of dark matter, the cosmos holds secrets that intrigue scientists and astronomers alike. Embarking on a cosmic journey allows us to contemplate the awe-inspiring scale and beauty of the universe, fostering a profound appreciation for the wonders that lie beyond our earthly confines. </p> <h2>Three Random facts about cosmos</h2> <ul> <li>The universe is continuously expanding</li> <li>Despite our advancements in astrophysics, the majority of the universe's mass is composed of dark matter, a mysterious and invisible substance that neither emits, absorbs, nor reflects light</li> <li>The afterglow of the Big Bang, known as the cosmic microwave background radiation, permeates the entire universe</li> </ul></article>Result:
