I'm trying to import a custom font in twind. I've read both the twind and tailwind docs on adding custom fonts and just cannot get it to work.
I've tried using #import and #font-face and neither work for me.
twind.ts
import { Configuration, setup } from "twind";
export * from "twind";
export const config: Configuration = {
darkMode: "class",
mode: "silent",
theme: {
extend: {
fontFamily: {
custom1: ['Roboto','sans-serif'],
custom2: 'Organo',
custom3: 'Varela'
},
spacing: {
128: '32rem',
144: '36rem',
},
},
},
preflight: {
'#import': `url('https://fonts.googleapis.com/css2?amily=Roboto:ital,wght#0,400;0,700;1,400&display=swap')`,
// Declare font face
'#font-face': [
{
fontFamily: 'Organo',
fontWeight: '400',
src: 'url(/static/fonts/Organo.woff)',
},
{
fontFamily: 'Varela',
fontWeight: '400',
src: 'url(/static/fonts/VarelaRound-Regular.ttf) format("ttf")',
}
],
},
};
if (IS_BROWSER) setup(config);
index.tsx
/** #jsx h */
/** #jsxFrag Fragment */
import { Fragment, h } from "preact";
import { tw } from "#twind";
export default function Home() {
return (
<>
<div class={tw`flex flex-col min-h-screen`}>
<p class={tw`my-6 text(4xl sm:4xl md:4xl) font-custom1`}>
hello, world
</p>
</div>
</>
);
}
Related
I'm trying to add local font to my NextJS + TailwindCSS project.
I have added the font inside public/fonts folder and I'm following the docs:
This is my code
import localFont from '#next/font/local'
const inter = Inter({
subsets: ['latin'],
})
const recoleta = localFont({
src: 'fonts/Recoleta-Regular.ttf',
fontFamily: 'Recoleta',
})
And I'm getting this error from the terminal.
I need help on which folder to add it or how to configure it perfectly.
Module not found: Can't resolve './fonts/Recoleta-Regular.ttf'
Had this error and fixed the issue by setting it up as such. Used https://nextjs.org/docs/api-reference/next/font#src for assistance.
Using app folder.
page.tsx:
import CustomFont from '#next/font/local'
const cfont = CustomFont({
src: '../public/fonts/cfont.ttf',
variable: '--font-cfont',
})
export default function Home() {
return (
<div className={`${cfont.variable}`}>
<div className="font-cfont">
Test
</div>
</div>
)
}
tailwind.config.js:
const { fontFamily } = require('tailwindcss/defaultTheme')
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
cfont: ['var(--font-cfont)', ...fontFamily.sans],
},
},
},
plugins: [],
}
I have this simple component:
import React from "react";
import { Grid } from "#mui/material";
import clsx from "clsx";
import theme from "../../theme";
// styling
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles(() => ({
buildContainers: {
"&.MuiGrid-root": {
height: "calc(calc((100vmin - 64px)",
},
},
flowchartContainer: {
"&.MuiGrid-root": {
backgroundColor: theme.palette.secondary,
},
},
}));
const BuildSection: React.FC = () => {
const classes = useStyles();
return (
<Grid container>
<Grid item className={classes.buildContainers} xs={2.8}>
Tools
</Grid>
<Grid
item
className={clsx(classes.buildContainers, classes.flowchartContainer)}
xs={12 - 2.8}>
Flowchart
</Grid>
</Grid>
);
};
export default BuildSection;
I want to change the backgroundColor to a color from my theme, but I get [object object] in the console styling sheet and the background color is not changing. What am I doing wrong? if I use the spread operator, it works for other component.
my theme:
import { createTheme } from "#mui/material/styles";
import "#mui/material/styles";
import "#mui/material/styles/createPalette";
enum themePalette {
ARCBLACK = "#181824",
ARCGREY = "#f5f5f5",
}
enum typographyFonts {
H3 = 300,
}
// adding a field
declare module "#mui/material/styles" {
interface TypographyVariants {
buttonStyleHeader: React.CSSProperties;
buttonStyleHeaderHover: React.CSSProperties;
estimateBtn: React.CSSProperties;
}
// allow configuration using `createTheme`
interface TypographyVariantsOptions {
buttonStyleHeader?: React.CSSProperties;
buttonStyleHeaderHover?: React.CSSProperties;
}
}
// Update the Typography's variant prop options
declare module "#mui/material/Typography" {
interface TypographyPropsVariantOverrides {
buttonStyleHeader: true;
buttonStyleHeaderHover: true;
}
}
declare module "#mui/material/styles/createPalette" {
interface CommonColors {
// might need more colors here3
}
}
const theme = createTheme({
palette: {
primary: {
main: themePalette.ARCBLACK,
},
secondary: {
main: themePalette.ARCGREY,
},
},
typography: {
h3: {
fontWeight: typographyFonts.H3,
},
buttonStyleHeader: {
backgroundColor: themePalette.ARCGREY,
textTransform: "capitalize",
fontSize: 19,
},
buttonStyleHeaderHover: {
backgroundColor: themePalette.ARCBLACK,
color: "white",
},
},
});
export default theme;
I know that for MUI v17+ the makeStyles have been depricated, but I don't know why the theme won't take this theme property.
I created a custom color on tailwind in next js. On localhost the defined color appears fine, but when I deploy to vercel the color doesn't appear.
here's the picture localhost
production in vercel
tailwind.config.js
const colors = require('tailwindcss/colors');
module.exports = {
purge: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}'
],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: {
DEFAULT: '#23232D'
},
white: colors.white,
gray: {
DEFAULT: '#A1A1A1',
},
...
}
},
variants: {
extend: {},
},
plugins: [],
}
ButtonColor/index.js
import PropTypes from 'prop-types';
import { motion } from 'framer-motion';
function ButtonColor({ color, isOpen, onClick }) {
const variants = {
open: { width: '100%' },
closed: { width: '50%' },
}
return (
<motion.div
className={`bg-${color} h-6 cursor-pointer`}
onClick={onClick}
animate={isOpen ? "open" : "closed"}
variants={variants}
>
</motion.div>
)
}
ButtonColor.propTypes = {
color: PropTypes.string.isRequired,
isOpen: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired,
}
export default ButtonColor;
Any solutions for this case? thanks.
You can't use string concatenation to create CSS class names because PurgeCSS won't know to preserve your custom classes during the build process.
className={`${color === 'red' ? 'bg-red' : 'bg-blue'} h-6 cursor-pointer`}
Alternatively, you can create a custom global CSS/SCSS file. In that file, define your styles using tailwindcss directives.
global.{css|scss}
.button {
#apply h-6;
#apply cursor-pointer;
&.red{
#apply bg-red-700 dark:bg-red-900;
#apply text-white;
#apply hover:bg-red-800 dark:hover:bg-red-800;
}
&.gray {
#apply bg-gray-300 dark:bg-gray-600;
#apply text-gray-900 dark:text-gray-200;
#apply hover:bg-gray-400 dark:hover:bg-gray-500;
}
}
<motion.button className="button"> ...
Side note - motion.div should be motion.button
I'm writing an application in React for 4k target device. the only problem is with the Material UI date picker - which seems tiny in 4k screens. How do I set its size with media queries?
Could not find any material on the subject. I tried something ( which is commented in the code I attached in this question.
import MomentUtils from '#date-io/moment';
import moment from 'moment';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core';
import {
DatePicker,
MuiPickersUtilsProvider,
} from 'material-ui-pickers';
import { greenAccept } from '../../colors';
const theme = createMuiTheme({
// props: {
// MuiWithWidth: {
// // Initial width property
// ['#media (min-width:2500px)']: { // eslint-disable-line no-useless-computed-key
// initialWidth: 'lg', // Breakpoint being globally set 🌎!
// },
// },
// },
typography: {
htmlFontSize: '16px',
['#media (min-width:2500px)']: { // eslint-disable-line no-useless-computed-key
fontSize: '32px',
},
},
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: `${greenAccept}`,
},
},
MuiPickersDay: {
isSelected: {
backgroundColor: `${greenAccept}`,
'&:hover': {
backgroundColor: `${greenAccept}`,
},
},
current: {
color: `${greenAccept}`,
},
},
MuiPickersModal: {
dialogAction: {
color: `${greenAccept}`,
},
},
},
});
class DatePickComponent extends React.Component {
handleDateChange = (date) => {
this.setState({
});
if (this.props.selectedDateHandler) {
this.props.selectedDateHandler(date);
}
}
formatWeekSelectLabel = () => {
const { title } = this.props;
if (this.props.date) {
return moment(this.props.date).format('DD/MM/YYYY');
}
return `${title}`;
}
render() {
return (
<MuiPickersUtilsProvider utils={MomentUtils}>
<MuiThemeProvider theme={theme}>
<DatePicker
readOnly
labelFunc={this.formatWeekSelectLabel}
onChange={this.handleDateChange}
animateYearScrolling
InputProps={{
disableUnderline: true,
}}
/>
</MuiThemeProvider>
</MuiPickersUtilsProvider>
);
}
}
export default DatePickComponent;
the expecteed results will be to the datepicker to show like its current size in the user laptop, but show much bigger in 4k screens
I have a component:
import React from 'react';
import * as styles from './RedComponent.css';
class RedComponent extends React.Component {
render () {
return <div className={ styles.red }></div>;
}
}
This is the test case:
describe('Test suite', () => {
test('RedComponent tests', () => {
const wrapper = shallow(<RedComponent />);
});
console.log(wrapper.debug());
gives
<div className={[undefined]}></div>
instead of
<div className="RedComponent__red"></div>
If I console the imported styles I get
console.log(styles); // {default: {}}
This is only in Jest test cases. Style is not undefined when the app renders in browser.
My jest config:
{
"moduleFileExtensions": [
"js"
],
"moduleDirectories": [
"node_modules"
],
"moduleNameMapper": {
"\\.(css|less)$": "identity-obj-proxy"
},
"setupFiles": [
"./test-setup.js"
],
"collectCoverageFrom": [
"src/**/*.{js}",
"!**/node_modules/**"
],
"testEnvironment": "node",
"transform": {
"^.+\\.js$": "babel-jest",
"\\.(md|ttf|txt|eot|ico|otf|svg|png|gif|woff2|woff|jpeg)$": "./file-transformer.js"
}
}
Using jest v21.2.1, identity-obj-proxy v3.0.0 and React v16.0.0.
You have to change this line
import * as styles from './RedComponent.css';
to this:
import styles from './RedComponent.css';
I assume that you are using css-loader or similar and this is just how the loader works.
Maybe worths to check the example:
https://github.com/keyanzhang/jest-css-modules-example/
I think your moduleNameMapper should be like this:
"^.+\\.(css|less)$": "identity-obj-proxy"
Create a jest/identity-obj-proxy-esm.js file with the following content:
// This works around the fact we use ES named exports for styles, e.g.:
// import * as styles from './styles.scss'.
// https://github.com/keyanzhang/identity-obj-proxy/issues/8
module.exports = new Proxy(
{},
{
get: function getter(target, key) {
if (key === '__esModule') {
// True instead of false to pretend we're an ES module.
return true;
}
return key;
},
},
);
Edit jest.config.js:
// jest.config.js
module.exports = {
...
moduleNameMapper: {
...
'\\.(css|scss)$': '<rootDir>/jest/identity-obj-proxy-esm.js',
}
};
🏆 João Vieira and https://github.com/keyz/identity-obj-proxy/issues/8#issuecomment-430241345