Tailwind breakpoint classes are not rendering based on the breakpoint - tailwind-css

I am using tailwind.css. I got stuck while using the responsive css classes. I tried applying the width to an element, but the default mobile class is only getting applied, but not the breakpoint css. The class names are available in the tailwind css library.
Thanks in advance.
Below is tailwind.config.js
module.exports = {
purge: {
content: [
'./src/hbs/**/*.hbs',
'./src/js/**/*.js',
]
},
plugins:[
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
theme: {
colors: {
// Configure your color palette here
primary: {
red: '#D9272E',
orange: '#EF7622',
teal: '#00B3C9',
grey: '#818181',
},
secondary: {
tealDark: '#0099AC',
tealDarkest: '#007E8F',
black: '#1A1818',
darkGrey: '#4D4D4F',
grey: '#DBDBDB',
lightGrey: '#F7F7F7',
white: '#FFFFFF',
}
},
fontFamily: {
"exo": ['"Exo"'],
},
screens: {
'md': '768px',
// => #media (min-width: 768px) { ... }
},
fontSize: {
// // mobile
// cfs: customFontSize
'cfs': '1rem',
'c2fs': '1.125rem',
'c3fs': '1.188rem',
'c4fs': '1.25rem',
'c5fs': '1.313rem',
'c6fs': '1.5rem',
'c7fs': '2rem',
'c8fs': '2.375rem',
'c9fs': '2.75rem',
}
}
}

This snippet:
plugins:[
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
Belongs in your postcss.config.js not your tailwind.config.js. Here is the relevant documentation https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports.
Edit:
The rest of your config works fine, here it is working on Tailwind Play.

Related

Why are custom height measures not working in my tailwind.config.js?

I have been working on a project with NextJS and Tailwind CSS.
I need to use the height class h-96 for a couple of components, but since it is not default-defined I decided to added it to my tailwind.config.js like this:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./ui/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
height: {
'96': '24rem',
},
// https://vercel.com/design/color
colors: {
vercel: {
primaryGreen: '#92c700',
primaryBlue: '#111871',
primaryPurple: '#5c068c',
secondaryPurple: '#6d0793',
},
},
},
},
};
I was expecting to be able to use h-96 but it seems that the configuration in the tailwind.config.js file are not been applied to the project.
NOTE: I also tried to set the height like this:
height: {
96: '24rem',
},
since the linting auto-corrected it for me, but this didn't work either.
h-96 is already defined in the tailwind css classes. You can update the h-96 default value in the tailwind.config.js in the following way.
/** #type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
height: {
'96':'124rem'
}
// ...
},
},
plugins: [],
}
Also , if you are just using it for couple of components, you can also directly change the values in the components itself like h-[124rem].
More info here
Height 96 (h-96) is a default theme. Since you are attempting to override a default, you must add it directly under the theme tab because you are not 'extending' anything, but rather changing the default configuration.
Source: Here
Try this:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./ui/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
height: {
96: '24rem',
},
extend: {
// https://vercel.com/design/color
colors: {
vercel: {
primaryGreen: '#92c700',
primaryBlue: '#111871',
primaryPurple: '#5c068c',
secondaryPurple: '#6d0793',
},
},
},
},
};

Tailwindcss styles completely disappears after running build-css

This is the import url
After writing npm run build-css on the terminal. The changes i made before and the change i wanted to make disappeared. None of the tailwindcss styles i had in my index.html was found.
extend: {
colors: {
primary: "FF6363"
},
fontfamily: {
body: ['Nunito'],
}
},
I would start by making sure the color-extend has the correct '#' before it and also wrapping the color name in quotes also.
Also check your webpack.mix.js file to make sure yourt calling the files in the correct order.
Should resemble something similar to mine.
mix.js("resources/js/app.js", "public/js")
.vue()
.sass("resources/sass/app.scss", "public/css")
.sass("resources/sass/components/sidebar.scss", "public/css")
.sass("resources/sass/components/modal.scss", "public/css")
.sass("resources/sass/components/language-picker.scss", "public/css")
.sass("resources/sass/custom.scss", "public/css")
.options({
processCssUrls: false,
postCss: [tailwindcss("tailwind.config.js")],
output: {
path: "birdboard",
publicPath: "/dist/js/",
filename: "./dist/js/bundle.js"
}
});
Also check your tailwind.config.js file for formatting issues, my version follows this simple layout.
module.exports = {
theme: {
screens: {
sm: "576px",
// => #media (min-width: 576px) { ... }
md: "960px",
// => #media (min-width: 960px) { ... }
lg: "1440px"
// => #media (min-width: 1440px) { ... }
},
backgroundColor: theme => ({
page: "var(--page-background-color)",
card: "var(--card-background-color)",
button: "var(--button-background-color)",
header: "var(--header-background-color)"
}),
colors: {
error: "var(--text-error-color)",
grey: {
default: "rgba(0, 0, 0, 0.4)",
lighter: "#F5F6F9"
},
white: {
default: "#fff"
},
blue: {
default: "#47cdff",
light: "#8ae2fe"
},
default: "var(--text-default-color)",
accent: {
default: "var(--user-accent-color)",
light: "var(--text-accent)"
},
muted: {
default: "var(--text-muted-color)",
light: "var(--text-muted-light-color)"
}
},
boxShadow: {
default: "0 0 5px 0 rgba(0, 0, 0, 0.08)",
blue: "0 2px 7px 0 #b0eaff"
},
extend: {}
},
variants: {},
plugins: []
};
Just as a quick note. You could try 'bg-rose-500' which is very similar to the color you was trying to add.
I use 'npm run dev' to build my assets in Laravel & Tailwind
This is for one-off colours using TailwindCSS
Arbitrary values
If you need a one-off custom color in your project, consider using Tailwind’s arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme:
<button class="bg-[#1da1f2] text-white ...">
<svg><!-- ... --></svg>
Share on Twitter
</button>

Vercel Deployment of Remix.js & Tailwind CSS (with NextUI) App: No CSS styling in Deployment

I'm pretty lost. Trying to deploy my Remix Tailwind App which is working perfectly in Dev Environment.
Dev Environment working fine
As soon as I deploy, almost anything is gone basically. See here:
Vercel Env not working
Here's my tailwind config file:
content: ["./app/**/*.{ts,tsx,jsx,js}"],
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
}
]
},
safelist: [{ pattern: /.*/ }],
theme: {
screens: {
xxs: "350px",
custom3: "420px",
xs: "480px",
custom2: "580px",
sm: "676px",
md: "768px",
custom: "910px",
lg: "1050px", // laptop: Default screen size
xl: "1280px", //desktop
"2xl": "1526px",
"3xl": "1696px"
},
extend: {
colors: {
textLgColor: "var(--text-large-color)",
textSmColor: "var(--text-small-color)",
subText: "var(--sub-text-color)",
navBar: {
linkActive: "var(--nav-link-active)",
linkActiveStripe: "var(--nav-link-active-stripe)"
},
mobileNav: {
text: "var(--mobile-text)",
textHover: "var(--mobile-hover-text)",
border: "var(--mobile-border)"
},
aboutMe: {
smIconBg: "var(--sm-icon-bg)",
aboutMeText: "var(--aboutme-text)",
alissa: "var(--alissa)"
},
projects: {
text: "var(--project-text-color)",
subText: "var(--project-sub-text)",
arrow: "var(--project-arrow)",
recentBg: "var(--recent-project-bg)",
recentHover: "var(--recent-project-bg-hover)",
recentShadow: "var(--recent-project-shadow)"
},
contact: {
label: "var(--label-text)",
send: "var(--send-btn)",
sendHover: "var(--send-btn-hover)"
},
blog: {
lgText: "var(--blog-lg-text)",
border: "var(--blog-input-border)",
tagBg: "var(--tag-btn-bg)"
},
post: {
bodyText: "var(--text-body)",
bodyTextLg: "var(--text-body-lg)",
icon: "var(--icon)",
iconHover: "var(--icon-hover)",
hyperlink: "var(--hyperlink)",
hyperlinkHover: "var(--hyperlink-hover)",
quote: "var(--quote)",
quoteAuthor: "var(--quote-author)"
}
}
}
},
plugins: [require("#tailwindcss/line-clamp")]
};
As this point I'm so frustrated, idgaf about my codebase anymore so here you go, I just made the repo public: https://github.com/flo-s99/Devato/settings
Any help appreciated

Tailwind custom forms: how to add your own color (hex value)

This site: https://tailwindcss-custom-forms.netlify.app/ gives this example tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
customForms: theme => ({
dark: {
'input, textarea, multiselect, checkbox, radio': {
backgroundColor: theme('colors.gray.900'),
},
select: {
backgroundColor: theme('colors.gray.600'),
},
},
sm: {
'input, textarea, multiselect, select': {
fontSize: theme('fontSize.sm'),
padding: `${theme('spacing.1')} ${theme('spacing.2')}`,
},
select: {
paddingRight: `${theme('spacing.4')}`,
},
'checkbox, radio': {
width: theme('spacing.3'),
height: theme('spacing.3'),
},
}
})
},
plugins: [
require('#tailwindcss/custom-forms'),
]
}
it uses colors.gray.600 notation for setting colors. However I need a #f90f39 color. How do I set it?
Use Tailwind’s arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme
<button class="bg-[#1da1f2] text-white ..."></button>
You need customize colors in tailwind.config.js: https://tailwindcss.com/docs/customizing-colors#app

TailwindCSS - adding fontSize

TailwindCSS 1.2.0
What I'm doing wrong? if I add fontSize as below text-7xl doesn't show up as the new optional value and text-6xl disappear.
module.exports = {
important: true,
theme: {
fontFamily: {
'theme-f1': ['"Oswald"', "sans-serif"],
'theme-f2': ['"Lora"', "serif"],
'theme-f3': ['"Bebas Kai"', "sans-serif"],
'theme-f4': ['"Open Sans"', "sans-serif"],
},
fontSize: {
'7xl': '7rem',
},
extend: {
colors: {
'theme-c1': '#006c32',
'theme-c1-b': '#6c8213',
'theme-c2': '#000000',
'theme-c3': '#ffffff',
}
},
},
variants: {
letterSpacing: ['responsive', 'hover', 'focus'],
},
plugins: [],
}
Currently you are overriding the default font sizes, you have to extend them if you want to add new font sizes without overriding the default ones:
module.exports = {
important: true,
theme: {
fontFamily: {
'theme-f1': ['"Oswald"', "sans-serif"],
'theme-f2': ['"Lora"', "serif"],
'theme-f3': ['"Bebas Kai"', "sans-serif"],
'theme-f4': ['"Open Sans"', "sans-serif"],
},
extend: {
fontSize: {
'7xl': '7rem',
},
colors: {
'theme-c1': '#006c32',
'theme-c1-b': '#6c8213',
'theme-c2': '#000000',
'theme-c3': '#ffffff',
}
},
},
variants: {
letterSpacing: ['responsive', 'hover', 'focus'],
},
plugins: [],
}
Afterwards compile your assets and you should have the default font sizes and your custom font size available.
You can read more about extending the default theme in the docs:
If you'd like to preserve the default values for a theme option but
also add new values, add your extensions under the theme.extend key.
For example, if you wanted to add an extra breakpoint but preserve the
existing ones, you could extend the screens property:
// tailwind.config.js
module.exports = {
theme: {
extend: {
// Adds a new breakpoint in addition to the default breakpoints
screens: {
'2xl': '1440px',
}
}
}
}

Resources