Recently, I integrated Tailwind CSS and Elements into my Laravel project.
While working on the responsive design aspect, I encountered an issue with the "height" property not functioning correctly when utilizing breakpoints such as "md:xxx".
Interestingly, other properties like background color, width, or flex are working as expected.
<div class="bg-pink-500 md:bg-black h-16 md:h-64"></div>The only modification I made to Tailwind was adjusting my application's color palette.
I came across a suggestion that a missing file (postcss.config.js) might be causing this problem. Although I have postcss installed (v8.4.6), manually creating and filling the file with the following contents did not resolve the issue:
postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
This is how I included the CSS links in my HTML:
HTML CSS links
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
{{-- Tailwind Components --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
mix.sass('resources/scss/style.scss', 'public/css');
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/**/*js'
],
theme: {
extend: {
fontFamily: {
'montserrat': ['Montserrat'],
sans: ['Montserrat'],
serif: ['Montserrat'],
mono: ['Montserrat'],
display: ['Montserrat'],
body: ['Montserrat']
},
colors: {
'black1': '#181818',
'black2': '#323232',
'white0': '#F9F9F9',
'white1': '#F1F1F1',
'white2': '#E4E4E4',
'red1': '#8E0000',
'red2': '#BA0000',
'red3': '#D62323'
},
},
},
variants: {
extend: {
opacity: ['disabled']
},
},
plugins: [
require('@tailwindcss/forms')
]
};
Thank you
UPDATE:
Even after setting breakpoints, the CSS continues to use default settings instead of the specified breakpoint styles.
Here is a screenshot showing the CSS in developer tools for reference