I am trying to add body font but it is not working. I tried #apply font-serif, tried #font-face and both. not working.
Config
module.exports = {
purge: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
fontFamily: {
serif: ['ff-more-web-pro', 'serif'],
body: ['ff-more-web-pro', 'serif'],
},
},
};
Global css
/* ./styles/globals.css */
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
body,
html {
#apply text-black;
#apply font-serif;
}
#font-face {
font-family: ff-more-web-pro, serif;
font-style: normal;
font-weight: 300;
}
}
Using font-body class directly on any element in html works. Also #apply text-black in #layer base also works and is applied to all.
Related
Suddenly my Tailwind started to load very slow when refreshing (hot-reload).
After some research, I found that #tailwind utilities; should not be imported via globals.css so I created a new file called tailwind-utils.css. ( #tailwind base and #tailwind components are also imported from different file called tailwind.css.)
Then, I imported those files in the _app.tsx like below
import '../styles/tailwind.css'
import '../styles/tailwind-utils.css'
import type { AppProps } from 'next/app'
import { GlobalStyles } from 'twin.macro'
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<GlobalStyles />
<Component {...pageProps} />,
</>
)
}
export default MyApp
And here is my tailwind.config.js file.
module.exports = {
mode: 'jit',
important: true,
content: ['./src/**/*.{js,ts,jsx,tsx}'],
purge: ['./src/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
plugins: [require('daisyui')]
}
Currently, the hot-reload takes more than 40seconds to load so I want to figure a way to go faster loading.
Here is my globals.css
/* #tailwind base;
#tailwind components;
#tailwind utilities; */
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
#import url('https://fonts.googleapis.com/css2?family=IBM Plex Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap');
I also noticed that hot-reloads complete in a second when I write CSS from the module, not inline. But when I update CSS using Twin.Macro syntax (Inline CSS) it takes lots time...
i am running into some problems compiling my CSS. I create 3 custom classes in my index.css file and also use #apply for some longer classes.
#tailwind base;
#tailwind components;
#tailwind utilities;
#font-face {
font-family: "Spartan";
src: url('/fonts/static/Spartan-Bold.ttf') format("truetype");
}
#layer base {
:root {
--main: "#3a4764";
--keypad: "#232c43";
--screen: "#182034";
--key-blue: "#637097";
--key-shadow-blue: "#404e72";
--key-red: "#d03f2f";
--key-shadow-red: "#93261a";
--key: "#eae3dc";
--key-shadow: "#b4a597";
--text-dark: "#444b5a";
--text-white: "#ffffff";
}
.themeLight {
--main: "#e6e6e6";
--keypad: "#d1cccc";
--screen: "#ededed";
--key-blue: "#377f86";
--key-shadow-blue: "#1b5f65";
--key-red: "#ca5502";
--key-shadow-red: "#893901";
--key: "#e5e4e1";
--key-shadow: "#a69d91";
--text-dark: "#35352c";
--text-white: "#ffffff";
}
.themeRetro {
--main: "#160628";
--keypad: "#1d0934";
--screen: "#1d0934";
--key-blue: "#58077d";
--key-shadow-blue: "#bc15f4";
--key-red: "#00e0d1";
--key-shadow-red: "#6cf9f2";
--key: "#341c4f";
--key-shadow: "#871c9c";
--text-light: "#ffe53d";
--text-dark: "#1b2428";
--text-white: "#ffffff";
}
}
where in my css file do i write the classes which use #apply? My classes with #apply all use the color variables from my custom themes like so:
.key {
#apply w-1/5 h-1/6 flex justify-center items-center rounded-md border-b-4 pt-2 font-bold text-3xl;
}
.keyColor1 {
#apply border-skin-key-shadow bg-skin-key text-text_dark;
}
.keyColor2 {
#apply border-skin-key-shadow-blue bg-skin-key-blue text-white text-xl;
}
.keyColor3 {
#apply border-skin-key-shadow-red bg-skin-key-red text-white;
}
.toggle {
#apply bg-skin-key-red;
}
My tailwind config file:
theme: {
extend: {
backgroundColor: {
skin: {
main: "var(--main)",
keypad: "var(--keypad)",
screen: "var(--screen)",
'key-blue': "var(--key-blue)",
'key-shadow-blue': "var(--key-shadow-blue)",
'key-red': "var(--key-red)",
'key-shadow-red': "var(--key-shadow-red)",
key: "var(--key)",
'key-shadow': "var(--key-shadow)",
'text-dark': "var(--text-dark)",
'text-white': "var(--text-white)",
}
}
},
},
thanks in advance!
Figured out the problem i had some extra parantheses around the hex color codes in
:root {
--main: "#3a4764";
--keypad: "#232c43";
--screen: "#182034";
--key-blue: "#637097";
--key-shadow-blue: "#404e72";
--key-red: "#d03f2f";
--key-shadow-red: "#93261a";
--key: "#eae3dc";
--key-shadow: "#b4a597";
--text-dark: "#444b5a";
--text-white: "#ffffff";
}
--key-shadow: "#b4a597"; should be --key-shadow: #b4a597;.
I am getting the following error as shown in the picture.
I have enabled jit mode in tailwind CSS and It used to work fine.
This is the error I got recently without making any changes in tailwind config.
If I remove the first 3 lines of ./styles/global.css that is
#tailwind base; #tailwind components; #tailwind utilities;
It works
If i removed mode:'jit' in tailwind config It works.
Both of the above is something I need and can't remove , Is there any solution to It.
Here is the tailwind.config.js file for reference.
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {
backgroundImage: () => ({
'sprite-background': "url('/images/icons.png')",
}),
boxShadow: {
fb: '0 -2px 5px rgb(128,128,128)',
fbpanel: '0 1px 10px grey',
img: '2px 3px 12px #d3d3d3',
},
// compiled the css with the below primary and secondary colors and linked with _app.tsx.
colors: {
primary: '#C54582',
secondary: '#F4DCF4',
'app-background': '#fff',
orange: '#ff5a42',
workItem: '#f5f5dc',
workItemActive: '#81816d',
plannedIncome: 'rgba(97,255,42,.43)',
plannedExpense: 'rgba(255,114,114,.49)',
},
fontFamily: {
sans: [
'Source Sans Pro',
'sans-serif',
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
mono: [
'ui-monospace',
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
'Liberation Mono',
'Courier New',
'monospace',
],
},
flex: {
2: '2',
},
gridTemplateColumns: {
financeHeader: '24rem 1fr',
},
},
},
variants: {
extend: {},
},
plugins: [],
}
// global.css
#tailwind base;
#tailwind components;
#tailwind utilities;
p{
#apply ml-1 mt-8;
}
li{
#apply mt-1;
}
h1{
#apply text-4xl;
}
h2{
#apply font-semibold ml-1 mt-8;
}
ul{
#apply list-disc ml-1 mt-8;
}
There was nothing wrong with how tailwind CSS was configured.
I am not 100% sure ,but the error went away when I removed the tailwind class using JIT syntax whose value was dynamically updated.
for example
<div className=`margin-[${marvalToBeCalcEveryRender}]px` />
I had the same problem (even with the dynamic class code commented out!) After digging through JIT issues on GitHub, I realized it was because tailwind is parsing the file for classes at build time (not run time).
That class wouldn’t work, but something like margin-[50px] would because tailwind knows what class to build with that code ahead of runtime.
PS I’m no expert, but that’s how I understood the problem and fixed it.
I am having a particular issue only on one project, which is using nextjs and tailwindcss.
I try to extend the color scheme with some custom colors and intellisennse recognizes the colors, but they are not applied and when I use it with #apply, app just breaks, saying those classes do not exist.
Syntax error: #apply cannot be used with .text-test because .text-test either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-test exists, make sure that any #import statements are being properly processed before Tailwind CSS sees your CSS, as #apply can only be used for classes in the same CSS tree.
This works in production so colors are applied, error just happens in dev. I can work around it,
but still it boggles me why it is not working.
_app.js
import ClientProvider from '../context/urqlClient'
import makeClient from '../utils/makeUrqlClient'
import '../styles/index.css'
function MyApp({ Component, pageProps }: AppProps) {
return (
<ClientProvider makeClient={makeClient}>
<Component {...pageProps} />
</ClientProvider>
)
}
export default MyApp
tailwind.config.js
module.exports = {
theme: {
colors: {
transparent: colors.transparent,
current: colors.current,
black: colors.black,
white: colors.white,
gray: colors.gray,
orange: colors.orange,
red: colors.red,
},
extend: {
colors: {
barbarian: '#FF7D01',
bard: '#E6CC80',
cleric: '#FFFFFF',
druid: '#FF7D0A',
fighter: '#C79C6E',
monk: '#00FF96',
paladin: '#F58CBA',
ranger: '#ABD473',
rogue: '#FFF569',
sorcerer: '#FF4700',
warlock: '#9482C9',
wizard: '#69CCF0',
},
},
},
variants: {},
plugins: [],
corePlugins: {
float: false,
},
purge: ['./**/*.tsx', './**/*.css'],
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
}
index.css (tailwind stuff only, rest I won't bother you with)
#tailwind base;
#tailwind components;
/* purgecss end ignore */
#tailwind screens;
#tailwind utilities;
html {
font-family: 'Inter var', sans-serif;
width: 100vw;
overflow-x: hidden;
}
...
I think you will need to move your CSS before the #tailwind lines. I think some of your styles must be missing from this component, since I don't see .text-test being referenced anywhere.
Anyways, try this:
html {
font-family: 'Inter var', sans-serif;
width: 100vw;
overflow-x: hidden;
}
...
#tailwind base;
#tailwind components;
/* purgecss end ignore */
#tailwind screens;
#tailwind utilities;
The default underline color in tailwind css is black. How can I change this color for example to a light green.
They have listed a way for one to change the default link underline color in the base style as below
#tailwind base;
a {
color: theme('colors.blue');
text-decoration: underline;
}
#tailwind components;
#tailwind utilities;
How would one go about changing the default normal underline color for say a span tag
There is no way to do that using the default tailwindcss build.
There are 2 ways to override the underline color:
Using simple CSS on your global CSS file
.underline {
text-decoration-color: red;
text-decoration: underline;
}
Extend the underline using the tailwind.config.js config file:
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: [
function ({addUtilities}) {
const extendUnderline = {
'.underline': {
'textDecoration': 'underline',
'text-decoration-color': 'red',
},
}
addUtilities(extendUnderline)
}
]
}
If you are using v3 of tailwind you can use decoration-{color}.
For example:
<a href="#" class="underline decoration-green">
my link text
</a>
Here are the docs:
https://tailwindcss.com/docs/text-decoration-color