TailwindCSS - adding fontSize - tailwind-css

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

Related

Tailwindcss Background color not parsed

using tailwindcss and applying background colors does not getting parsed
here is my tailwind config
const colors = require("tailwindcss/colors");
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
"saibaba-orange": {
light: "#ff6426",
DEFAULT: "#ff6426",
dark: "#ff6426",
},
},
minHeight: {
0: "0",
"1/4": "25%",
"1/2": "50%",
"3/4": "75%",
full: "100%",
},
extend: {
fontFamily: {
sans: ["Lora", "Helvetica", "Arial", "sans-serif"],
},
backgroundImage: {
"hero-pattern":
"url('/img/banner_bg.png')",
},
},
},
variants: {
extend: {
backgroundColor: [
"responsive",
"hover",
"focus",
"active",
"group-hover",
],
},
},
corePlugins: {},
plugins: [require("tailwindcss"), require("precss"), require("autoprefixer")],
};
using in html for example the background class will not produce any output. Inspecting the DOM there is no reference to the CSS class.
<div class="bg-blue-500"></div>
You are overriding the default colors within your theme.colors. You need to move your custom colors into extend.

How can I disable Tailwind css for certain file?

I want to disable tailwind for certain files, because tailwind base styles rewrites styles that came from CMS. I tried to disable preflight, but it's break all existing system. Is it possible at all?
Tailwind version - 2.2.7
My tailwind config:
const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
module.exports = {
mode: 'jit',
purge: ['./src/**/*.{js,tsx}'],
theme: {
extend: {
colors: {
indigo: colors.indigo,
green: colors.green,
yellow: colors.yellow,
'royal-blue': {
100: '#F0F1FC',
200: '#D9DCF9',
},
blueGray: {
50: '#f8fafc',
100: '#f1f5f9',
400: '#94a3b8',
},
},
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
maxWidth: {
'8xl': '90rem',
},
},
},
variants: {},
plugins: [
function ({ addComponents }) {
addComponents({
'.container': {
'#screen lg': {
maxWidth: '1024px',
},
'#screen xl': {
maxWidth: '1140px',
},
},
});
},
],
};```

Trouble with Typekit fonts in Tailwind

I'm trying to import TypeKit fonts into my Tailwind config. I have included the .css file like so in my index: https://use.typekit.net/kcz3fka.css. Inside my tailwind.config.cjs file I have the definition:
module.exports = {
purge: ['index.html', 'src/**/*.tsx'],
mode: 'jit',
theme: {
extend: {
container: {
center: true,
},
fontFamily: {
display: ['"katarine-web"', ...theme.fontFamily.sans],
body: ['"katarine-web"', ...theme.fontFamily.sans],
},
},
},
plugins: [
require('#tailwindcss/typography'),
require('#tailwindcss/aspect-ratio'),
],
};
I've tried escaping the katarine name as well as with and without double quotes. Neither seem to work as expected. What should I be doing to ensure Katarine can be used?
try this,
module.exports = {
purge: ['index.html', 'src/**/*.tsx'], // include your purge target files
mode: 'jit',
theme: {
extend: {
container: {
'center': true,
},
fontFamily: { // if you want extend 'katrarine-web', then just add them instead other originals.
'display': ['katarine-web'],
'body': ['katarine-web'],
},
},
},
plugins: [
require('#tailwindcss/typography'),
require('#tailwindcss/aspect-ratio'),
],
};
also, check this Doc.
Happy coding :)

Enable hover only on top/bottom/left/right

I'm trying to create a variant in Tailwind file configuration.
What I would like to have is something like hover:border-l-4 hover:border-green-400, so a class that enables a border on the left (or only on top / bottom / right).
So I create this inside tailwind.config.js:
module.exports = {
purge: {
enabled: process.env.NODE_ENV === 'production',
content: ['./src/**/*.html', './src/**/*.{js,ts,jsx,tsx}'],
},
darkMode: false,
theme: {
extend: {
colors: {
...
},
},
borderLeft: (theme) => ({}),
...
},
variants: {
extend: {
borderLeft: ['hover', 'focus']
},
},
plugins: [],
}
It doesn't work. I get TypeError: variantsValue is not iterable.
I didn't find anything useful in the documentation page.
Checkout docs on tailwind.
variants: {
extend: {
borderWidth: ['hover'],
}
}
From here, hover:border-l-4 hover:border-green-400 will work.

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

Resources