Tailwind does not apply custom font family in production build - javascript

I am using Vue with Tailwind right now.
Here is my current Tailwind config:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
purge: [],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {},
plugins: [],
}
I am using the Inter var font, because on OSX systems the default font weights do not work. Right now, I want to build this project, but in the production version it does not apply the correct font family. I've tried to import the font family via a html link and css import, but neither of those worked.

If you're on Vue-CLI, I'd recommend adding the typeface via NPM for maintainability, and import it into your entry file (e.g. main.js). This package will take care of referencing and importing the webfont(s) for you, so there's no need to create additional CSS anymore.
Installing the font
npm i typeface-inter
Importing it
import Vue from 'vue';
import 'typeface-inter';
// ...
And of course, you'll still need to extend the font-family (or simply adding it to the list will work too).

Related

How to publish a react-component with css modules that can be consumed by both, projects using ES Modules and CommonJs for css modules

For some frameworks (eg. Gatsby >= V3) the default for importing CSS modules is as ES modules like so:
import { class1, class2 } from 'styles.modules.css'
// or
import * as styles from 'styles.modules.css'
https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules
Other projects such as Create React App still use the default export like this:
import styles from 'styles.modules.css'
How can I publish a react-component (that uses css modules internally) so that it can be imported and used in both scenarios without extracting the css?
One workaround I found is to generate the css module hashed classes and extract the stylesheet. Then import the stylesheet with the hashed classes instead of the css module stylesheet. Every bundler that is able to import css modules should also be able to deal with the extracted css file.
I am using babel-plugin-css-modules-transform for this using the following configuration:
…
"plugins": [
[
"css-modules-transform",
{
"extractCss": {
"dir": "./lib/",
"relativeRoot": "./src/",
"filename": "[path]/[name].compiled.css"
},
"keepImport": true,
"importPathFormatter": "./importPathFormatter"
}
]
]
…
The keepImport option will keep the import but transforms it from eg. import * as styles from 'styles.module.css' to import 'styles.module.css'.
I use this option in combination with the undocumented option importPathFormatter to import the transformed css. CSS preprocessing eg. postCSS is done by the consuming application.
Content of ./importPathFormatter.js:
module.exports = path => path.replace(/\.css$/, '.compiled.css');
In the long term I want to migrate my projects to vanilla extract and use rollup/vite for bundling, but for now this is working fine.

Cypress component tests for Nuxt with Tailwind

I'm trying to set up Cypress component tests for a Nuxt app. It works, but almost none of my styles are working, because they depend on Tailwind together with my custom tailwind.config.js.
This is my cypress/plugins/index.js:
const { startDevServer } = require('#cypress/webpack-dev-server');
const { getWebpackConfig } = require('nuxt');
module.exports = (on, config) => {
on('dev-server:start', async (options) => {
const webpackConfig = await getWebpackConfig();
return startDevServer({
options,
webpackConfig,
});
});
return config;
};
How can I include Tailwind with a custom config? And while we're at it: how do I include an extra global .scss files in all my component tests?
You can get your styles to work by importing them directly into your test files, like so:
// YourComponent.spec.js
import 'tailwindcss/dist/tailwind.min.css'
import '#/assets/css/tailwind.css'
I'm looking into a method to add these styles globally as well, so if I find something I'll make sure to post it here.
Updated answer
Add the following to your build settings in your nuxt.config.js file.
// nuxt.config.js
import { join } from 'path'
...
plugins: {
tailwindcss: join(__dirname, 'tailwind.config.js'),
...
},
If you have jit mode enabled for tailwindcss, make sure to add the appropriate purge paths to your tailwind config. With me it was loading in an infinite loop, after specifying these paths more specific it was sorted out. Also see tailwind docs.
// tailwind.config.js
purge: [
'./components/**/*.vue',
'./layouts/**/*.vue',
'./pages/**/*.vue'
],

How to introduce your own style when using Snipcart?

I'm building an ecommerce platform using GatsbyJS and Snipcart. It works well, but I want to override the default theme provided by Snipcart, and when I want to change the main default CSS through gatsby-config.js for some reason, it does not work.
Anyone has a solution? Thanks.
This code below makes the snipcart to stop functioning, exactly when I add the styles option:
{
resolve: 'gatsby-plugin-snipcartv3',
options: {
apiKey: 'API_IS_HIDDEN_FOR_A_REASON',
autopop: true,
styles: '.src/components/layout.css'
}
},
The question is how to make Snipcart version 3 to accept different styles provided by me when used with GatsbyJS? I tried their documentation, but there was not much, also looked on github as well.
I found the easiest way to do this was as follows:
In the snipcart plugin config options, set styles to false so it doesn't link the default stylesheet
{
resolve: 'gatsby-plugin-snipcartv3',
options: {
apiKey: process.env.SNIPCART_KEY,
autopop: false,
styles: false
}
}
Create a new stylesheet (e.g., src/styles/cart.css)
Copy the styles from Snipcart's default stylesheet into your cart.css, and make your desired customizations
Import your cart.css into your Layout component (or into gatsby-browser.js)

inject style into DOM using link tag in Gatsby

Is there any way to configure gatsby to inject a style file using a link tag?
currently, I have a global style (style.less) which I import it using a Layout Component. It's ok but It injects all CSS content into each page and bumps the page size.
I want to configure gatsby to load this style file using a link tag instead of injecting directly into DOM. webpack has an option for this purpose but I couldn't find anything similar for Gatsby.
Try:
exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => {
const config = getConfig();
config.module.rules = [
...config.module.rules.filter(rule => String(rule.test) !== String(/\.jsx?$/)),
{
test: /\.link\.css$/i,
use: [
{ loader: `style-loader`, options: { injectType: `linkTag` } },
{ loader: `file-loader` },
],
},
];
actions.replaceWebpackConfig(config);
};
Gatsby allows you to customize the webpack's configuration by exposing some APIs (such as onCreateWebpackConfig or setWebpackConfig) functions.
The code is quite self-explanatory if you take into account the style-loader from webpack. Basically, you are setting some custom loaders for all files that match the regular expression, and finally, you override the default configuration with actions.replaceWebpackConfig(config).
For further details check Adding Custom webpack configuration docs.
In addition, regarding your original issue, you don't need to add your global styles in your Layout component since it will cause what you said, it will bump the page size. With Gatsby, you can use gatsby-browser.js API to add global styles like (in your gatsby-browser.js file):
import './src/your/path/to/global/style.less';
Check the link you've provided (Standard Styling with Global CSS file).

Next.js with FortAwesome and SSR

I am building a Next.js application and looking for an icon package that works with its SSR paradigm.
After trying a few libs, I'm now working with FortAwesome/react-fontawesome, which looks promising.
The problem is when the page loads the icons are large (unstyled) and then suddenly they are styled properly. I'm trying to figure out how to get these to style server-side.
I've seen folks talk about importing a stylesheet provided by FortAwesome:
import '#fortawesome/fontawesome-svg-core/styles.css';
However, I'm unsure which file(s) this should be done in and also, Next complains when I try this:
[ error ] ./node_modules/#fortawesome/fontawesome-svg-core/styles.css
1:8 Module parse failed: Unexpected token (1:8) You may need an
appropriate loader to handle this file type, currently no loaders are
configured to process this file
I've looked at the CSS plugin, but this also seems like a red herring.
How can I get the font-awesome icons in this package to be styled on the server with Next.js?
React-fontawesome has added a section on how to get FontAwesome working with Next.js.
https://github.com/FortAwesome/react-fontawesome#nextjs
Create an ./pages/_app.js file in your project
import React from 'react'
import App, { Container } from 'next/app'
import { config } from '#fortawesome/fontawesome-svg-core'
import '#fortawesome/fontawesome-svg-core/styles.css' // Import the CSS
config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
class MyApp extends App {
render() {
const { Component, pageProps } = this.props
return <Component {...pageProps} />
}
}
export default MyApp
or using a function component:
import { config } from '#fortawesome/fontawesome-svg-core'
import '#fortawesome/fontawesome-svg-core/styles.css' // Import the CSS
config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
There are definitely a few ways to take this problem. I solved it in my project by importing the icons I needed directly into my React app. So no Font Awesome libraries sit on the client-side, just the rendered SVGs.
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faAdobe } from '#fortawesome/free-brands-svg-icons/faAdobe'
...
return (
<FontAwesomeIcon icon={faAdobe} />
)
Font Awesome also provides a page to discuss other methods: server-side-rendering
I'm going to put this as an answer, because it's a way, however I feel like there is a better solution out there, so I will not accept this one.
I created a static/css folder, then copied the css file referenced in the question
cp node_modules/#fortawesome/fontawesome-svg-core/styles.css static/css/fortawesome.css
Then in _document.js I load the file via link tag:
<link
rel="stylesheet"
type="text/css"
href="/static/css/fortawesome.css"
/>
I would consider this a stop-gap solution. One issue obviously is that when the underlying library updates I would need to copy over the latest version of the css file manually.
I had this same issue and fixed it by manually inserting Font Awesome's CSS into styles which I know will get SSR'ed correctly.
I use styled-components, which is easy to set up with Next.js SSR, and here's how I did it:
import { createGlobalStyle } from "styled-components";
import { config, dom } from "#fortawesome/fontawesome-svg-core";
// Prevent FA from adding the CSS
// (not that it was doing it in the first place but might as well)
config.autoAddCss = false;
// Add the FA CSS as part of Global Styles
const GlobalStyles = createGlobalStyle`
${dom.css()}
`;
Here is what I have tried so far to fix this issue in my project:
Installation of #zeit/next-css, #zeit/next-sass [I need sass too.]
Installation of fontawesome packages & import CSS
Installation of #zeit packages
Install required packages:
npm i --save #zeit/next-css
npm i --save #zeit/next-less
npm i --save #zeit/next-sass
then update next.config.js file such as below that will support CSS import which fix the issue of loading correct styles upon loading:
const withCSS = require('#zeit/next-css')
const withLess = require('#zeit/next-less')
const withSass = require("#zeit/next-sass");
module.exports = withLess(withCSS(withSass({
webpack(config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
});
return config
}
})));
Installation of fontawesome packages & import CSS
Install required packages:
npm i --save #fortawesome/fontawesome-svg-core
npm i --save #fortawesome/free-solid-svg-icons
npm i --save #fortawesome/react-fontawesome
Then you can use following code within your pages extending React.Component located under pages directory:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { library } from '#fortawesome/fontawesome-svg-core';
import { fas } from '#fortawesome/free-solid-svg-icons'
import '#fortawesome/fontawesome-svg-core/styles.css';
library.add(fas);
Then this is the way you can use fonts:
<FontAwesomeIcon icon={["fas", "user-tie"]} />
I may be wrong.

Categories

Resources