Courses

Tailwind CSS for Laravel Developers

Tailwind Configuration and Customization Options

Now, let's quickly review the other useful customization options in the configuration.

1. Custom Colors

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:

  • define an alias for existing tailwind color, like accent, then you're able to use text-accent, bg-accent classes
  • define arbitrary primary color, and text-primary, bg-primary becomes available to use
  • define color object with shades to use: text-saffron-300, bg-saffron-900 etc.

In the editor, it may look like this:

TailwindCSS Custom Colors

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.


2. Custom Fonts

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],
},
},
},

3. Plugins

You can add plugins to extend your TailwindCSS installation further.

3.1 Forms plugin

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],
};

3.2 Typography plugin

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-dev

And 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:

TailwindCSS Typography Plugin

avatar

In the file tailwind.config.js

	theme: {
        colors: {
            extend: {

It must be?

    theme: {
        extend: {
            colors: {
avatar

By default, Tailwind makes the entire default color palette available as text decoration colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

https://tailwindcss.com/docs/text-decoration-color#customizing-your-theme

It shouldn't matter much in this case.

avatar

I know, I can use.

theme: {
        extend: {
              colors: {

And

theme: {
     colors: {

But, can you use? (It's in the tutorial)

theme: {
        colors: {
            extend: {

For me, I cannot use it. I use Tailwind 3.1.0 and Laravel 10.35.0. So, does it work on other version?

avatar

yes, you can

avatar

Thank you, that is it.

avatar

just on offtopic question. why you don't have the mark as complete button in the bottom of the page? or pressing the next lesson to automaticaly mark the lesson as completed?

avatar

Yes, pressing the next lesson at the bottom marks the current lesson as completed.