I'm using TailwindCSS to create a portfolio website. Not using anything fancy, just a static website using Tailwind.
Recently, my font that is "Inter" from Google Fonts is not rendering on mobile browsers. It was working before suddenly stopped worked when I extended a few colors.
The weird thing is, everything works fine on desktop browsers with mobile screen sizes using dev tools in Chrome and Safari.
Does anyone know what seems to be the problem or experienced the same issue?
Thanks in advance!
Here is my code:
My src css file:
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap');
#tailwind base;
#tailwind components;
#tailwind utilities;
My tailwind.config.js file:
module.exports = {
purge: {
mode:'layers',
content:['./public/**/*.html/']
},
darkMode: 'media', // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
'body': ['Inter'],
},
colors: {
cwc: {
red:'#FF0000',
},
black: {
900:'#000000',
800:'#0D0D0D',
700:'#191919',
600:'#333333',
},
bg: {
white:'#F6F9FC',
},
text: {
primary:'#0b0014',
paragraph:'#61656b',
secondary:'#61656b',
tertiary:'#90959D',
highlight:'#1f66ff',
},
button: {
neutral:'#676B71',
hover: '#0b0014',
},
},
},
},
variants: {
extend: {},
},
plugins: [],
}
My postcss.config.js file
const cssnano = require(cssnano);
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
cssnano({
preset:'default',
}),
]
}
Setup Google Fonts
First of all, head over to Google Fonts and find a cool font you want to use.
Open up the font and click the "Select this style" button for each style you like.
Select Google Font styles
With it selected, you'll get a sidebar on the right showing the <link> attribute for it. Copy this link method.
Now head back to your project and open the index.html file. We'll place this import above our styles.css file.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- other stuff -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
</html>
Add to Tailwind
Now let's extend our Tailwind theme to have it know about this font.
Open the tailwind.config.js file and extend the theme's fontFamily option.
module.exports = {
theme: {
extend: {
fontFamily: {
'press-start': ['"Press Start 2P"', 'cursive']
}
}
}
};
If your font like this example uses spaces, it's best to use the double escape '""' it will make sure it's used in the right way.
Our font will now be available as font-press-start we can add this to our heading on the homepage like this:
<h1 class="text-6xl font-press-start">Welcome</h1>
Related
I am using webpack for my react project to generate index.bundle.js file.
This is my webpack.config.js...code
const path = require('path');
module.exports = {
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js',
},
// entry:{
// path: path.join(__dirname, '/dist')
// },
devServer: {
port: 3000,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(sa|sc|c)ss$/, // styles files
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|jpeg|webp)$/, // to import images and fonts
loader: "url-loader",
options: { limit: false },
}
]
},
};
This is my index.html file... index.html file is inside public folder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="/index.bundle.js"></script>
</body>
</html>
My index.bundle.js file is inside dist file, name as index.bundle.js.
I want to check here that my index.bundle.js is compiled successfully or not so, i am trying to run that index.bundle.js inside index.html. So i can see my react project using index.bundle.js. so here what i am doing.
i am using Open In Default Browser extension to run my html code on browser. I am not sure i am doing right step!, If not How can i run html code
second thing
if inside index.html i change my script src path to
<script src="../dist/index.bundle.js"></script>
i am getting this error..
index.bundle.js:2 Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: 2752
at Object.set [as exports] (index.bundle.js:2:1234650)
at 2752 (index.bundle.js:2:168796)
at a (index.bundle.js:2:1233913)
at index.bundle.js:2:1237036
at index.bundle.js:2:1237044
I use Tailwind CSS for my project and I was developing for desktop, with RWD working on Safari and Google Chrome.
However, when I switched to use the DevTools it just doesn't work.
I'm having the same issue using a mobile device.
For example on a mobile device (iphone7+) only h-vh70 is applied.
<div class="h-vh30 sm:h-vh50 md:h-vh70 w-screen flex justify-center items-end">
<img src="./src/img/banner 1.png" alt="" />
</div>
My tailwind.config.js file:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
//my html files
],
theme: {
extend: {
height: {
vh30: "30vh",
vh50: "50vh",
vh70: "70vh",
},
},
},
plugins: [require("tailwindcss-textshadow"), require("autoprefixer")],
};
i forgot to add <meta name="viewport" content="width=device-width, initial-scale=1.0">
problem solved!
I'm trying to use Google Material Icons in my react-styleguidist documentation.
In my styleguide.config.js file, I've tried
module.exports = {
template: './template.html'
}
and then added <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> to the <head> tag of the template.html file but react-styleguidist doesn't recognize this format anymore, it seems.
I've tried to use a template and theme as follows:
template: {
head: {
links: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Material+Icons'
}
]
}
},
theme: {
fontFamily: {
base: "Material+Icons"
}
}
This just displays the icon name in words rather than the actual icon. I think this method only works for actual fonts like Roboto etc. Any help would be appreciated.
I've found a solution that works for me. May not be the ideal way to do it, but it works.
In my styleguide.config.js I've added:
require: [
path.join(__dirname, '/fonts/material-icons.css'),
]
Inside /fonts/material-icons.css, I've pasted the css from here -
https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp
And that's it. Now I can use something like <span class="material-cions-rounded">group</span> in any of my code files.
I have come across a tool called princexml that can convert html+css into pdf beautifully (see this video). With this it's even possible to write a PhD thesis using entirely html+css and get a nice pdf output in the end. But it seems it does not handle mathjax well. I guess this is because the mathjax part much be rendered in a browser first.
So I have a simple html file like this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test math</title>
<style type="text/css">
</style>
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
HTML: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
equationNumbers: { autoNumber: "AMS" } },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true },
"HTML-CSS": { availableFonts: ["TeX"],
linebreaks: { automatic: true } }
});
</script>
</head>
<body>
$x^2 + y^2 = 1$
</body>
</html>
After conversion using princexml:
prince --javascript x.html -o x.pdf
the equation is rendered verbatim in the pdf.
Is there a way to make this work?
This is because princexml doesn't yet support setTimeout method which Mathjax uses for its asynchronous functions. There are two workarounds:
Render your html in the browser such as Chrome first. Get the entire document (not the source but actual rendered document) saved into html file and then use it as input to prince. You can get entire rendered document from browser javascript console.
Second method is to use a headless browser like phantomjs. See also
https://web.archive.org/web/20150503191319/http://www.lelesys.com/en/media/technology/phantomjs-as-screen-capture-to-generate-image-pdf-files.html
Wierd.
This is part of my manifest:
"permissions" : [
"http://site.com/"
,"http://site.com/*"
,"http://www.site.com/*"
,"http://www.site.com/"
]
,"web_accessible_resources": [
"css/tweaks.css"
]
,"content_scripts" : [{
"matches" : [
"http://*.site.com/",
"http://*.site.com/*",
"http://site.com/*",
"http://www.site.com/*"
],
"css" : [
"css/tweaks.css"
],
"js" : [
"js/jquery162.js",
"js/tweaks.js"
]
,"run_at": "document_end"
}]
Here's tweaks.css:
*{
color: red !important;
font-weight: bold;
}
And finally the background.html (which is not important here)
<html>
<head>
<title></title>
<script src="js/jquery162.js"></script>
<script src="js/js_extend/extend.js"></script>
<!--<script src="js/main.js"></script>-->
</head>
<body>
</body>
</html>
And, when i reload an extension (unpacked), then reload page, which must be customized by injected CSS, I see nothing. When I open developer console in google.chrome I can't see any custom styles applied to any element. After that I'm closing the console and SUDDENLY see all text gone red and bold, open the console and, guess what, see the "user stylesheet" with my injected rules.
I can't understand what's wrong. Before google had changed their manifest to version 2 i had one middle-sized extension with A LOT OF content CSS, which was working perfectly, now I can't inject even *{color:red} rule. Please, help me.
Chrome is 24.0.1312.14 beta-m
UPDATE: tweaks.js is empty
UPDATE: tested with 24.0.1312.14 m - same sh...
MORE UPDATE: Fixed it in some way. But i'm not fully confident about it.
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var isSite = ( tab.url && tab.url.indexOf('site.com') >= 0);
if ( isSite ){
chrome.tabs.executeScript(tabId, {
file: Paths.add_element //filepath
});
chrome.tabs.insertCSS(tabId, {
file: Paths.my_css_path //filepath
});
}
});
The trick is that you need to do it after all site.com rules applied.
It's a known bug in Chrome: See http://crbug.com/154905 and http://crbug.com/158012