Fix font imports after tailwind upgrade

This commit is contained in:
Kurt Hutten
2021-09-03 07:02:19 +10:00
parent bbf2a2eb55
commit 1c13a38ccb
7 changed files with 39 additions and 11 deletions

View File

@@ -2,6 +2,7 @@ const path = require('path')
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
require('autoprefixer'),
],

View File

@@ -1,5 +1,5 @@
module.exports = {
purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.ts', './src/**/*.tsx'],
purge: ['src/**/*.{js,jsx,ts,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
@@ -49,10 +49,10 @@ module.exports = {
grab: 'grab'
},
fontFamily: {
'ropa-sans': ['Ropa Sans', 'Arial', 'sans-serif'],
'ropa-sans': ['"Ropa Sans"', 'Arial', 'sans-serif'],
roboto: ['Roboto', 'Arial', 'sans-serif'],
'fira-code': ['Fira Code', 'monospace'],
'fira-sans': ['Fira Sans', 'sans-seri'],
'fira-code': ['"Fira Code"', 'monospace'],
'fira-sans': ['"Fira Sans"', 'sans-serif'],
},
gridAutoColumns: {
'preview-layout': 'minmax(30rem, 1fr) minmax(auto, 2fr)',

View File

@@ -52,6 +52,7 @@
"autoprefixer": "^10.3.1",
"html-webpack-plugin": "^4.5.0",
"postcss": "^8.3.6",
"postcss-import": "^14.0.2",
"postcss-loader": "^6.1.1",
"tailwindcss": "^2.2.7"
}

View File

@@ -10,6 +10,7 @@ ReactGA.initialize(process.env.GOOGLE_ANALYTICS_ID)
import Routes from 'src/Routes'
import './font-imports.css'
import './scaffold.css'
import './index.css'

View File

@@ -0,0 +1,9 @@
@import 'https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap';
/*
Putting fonts in a separate css files is a robust way of making sure imports work with post-css
https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
*/

View File

@@ -9,11 +9,6 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
/**
* END --- TAILWIND GENERATOR EDIT
*/