[Bug]: custom fonts are not working.
sk29110 opened this issue · comments
Operating system
os x
Node.js version
v12.14.1
Shopify CLI version
2.0.0
Browsers
Chrome
Version
4 (Current)
Modifications
No response
Details
I have set up uicrook theme but somehow when specify the custom fonts in the tailwind.config.js it's not generating custom fonts classes. Is it possible we are forgetting something? When npm run start it doesn't recognize the tailwind.config.js as purgeCSS works but custom conts are not generated(text-my-color..etc).
I am using tailwindcss 3.0.15. Here is my tailwind.config.js
`const path = require('path');
module.exports = {
theme: {
extend: {
colors: {
'my-color': '#33333',
}
},
container: {
center: true,
padding: '1rem'
}
},
plugins: [],
content: [
path.resolve(__dirname, '/*.{js,vue}'),
path.resolve(__dirname, '../shopify//*.liquid')
]
}`
Notice
- I read the notice
I think you're missing a digit in your color hex code instead of #33333 it should be #333333. I've got an invalid property error when trying your color out. Otherwise, no issues here tailwind generates everything.
It's not just that. the quite often I have problem some class not generated either custom color class or pt- pb class generated on the html. If I specify in the style like @apply pt-1 it works better. This is my current tailwind.conf. Is there any way to explicitly generate the class even the class is not specified in the html like how it used to do in the older version? It took me a way longer time to develop because not sure why the class is not generated. `/**
- Tailwind CSS configuration file
- docs: https://tailwindcss.com/docs/configuration
- default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
*/
const path = require('path');
const colors = require('tailwindcss/colors');
const plugin = require('tailwindcss/plugin');
module.exports = {
purged: [],
theme: {
extend: {
colors: {
'cloud-gray': {
50: '#EEEEE9',
200: '#D9D9D5',
500: '#838381',
900: '#424242',
},
'error-fall': '#95433D',
'vintage-blue': '#5A5F72'
},
fontFamily:{
'merlo-neue': ['merlo_neue_round']
}
},
container: {
center: true,
padding: '1rem'
}
},
plugins: [
plugin(function ({ addBase, config }) {
addBase({
h4: {
fontFamily: 'merlo_neue_round',
letterSpacing: '0.5px'
}
});
})
],
content: [
path.resolve(__dirname, '.{js,vue}'),
path.resolve(__dirname, '../shopify/**/.liquid')
]
} `
package.json
{ "name": "shopify-foundation-theme", "description": "Modern Shopify theme using Shopify Theme Lab, Liquid, Vue and Tailwind CSS", "author": "Sergej Samsonenko", "version": "4.5.0", "license": "MIT", "scripts": { "start": "run-p -sr shopify:serve webpack:watch", "deploy": "run-s webpack:build && cd shopify && shopify theme push", "deploy:new": "run-s webpack:build && cd shopify && shopify theme push --unpublished", "webpack:watch": "cross-env NODE_ENV=development BROWSERSLIST_ENV=development BROWSERSLIST_CONFIG=.config/.browserslistrc webpack --config .config/webpack/webpack.dev.js --watch --progress", "webpack:build": "cross-env NODE_ENV=production BROWSERSLIST_ENV=production BROWSERSLIST_CONFIG=.config/.browserslistrc webpack --config .config/webpack/webpack.prod.js --progress", "shopify:serve": "cd shopify && shopify theme serve", "shopify:pull": "cd shopify && shopify theme pull", "build:css": "tailwind build public/tailwind.css -o public/style.css", "lint": "run-s -c lint:*", "lint:js": "eslint src/**/*.{js,vue} --config .config/.eslintrc.js", "lint:css": "stylelint src/**/*.{vue,css,sass,scss} --config .config/.stylelintrc.js", "lint:shopify": "cd shopify && shopify theme check", "fix": "run-s -c fix:*", "fix:js": "eslint src/**/*.{js,vue} --config .config/.eslintrc.js --fix", "fix:css": "stylelint src/**/*.{vue,css,sass,scss} --config .config/.stylelintrc.js --fix", "fix:shopify": "cd shopify && shopify theme check -a" }, "dependencies": { "axios": "^0.25.0", "file-loader": "^6.2.0", "mitt": "^3.0.0", "vue": "^3.2.26", "vue3-carousel": "^0.1.35", "vuex": "^4.0.2" }, "devDependencies": { "@babel/core": "^7.16.0", "@babel/plugin-transform-runtime": "^7.16.4", "@babel/preset-env": "^7.16.4", "@vue/compiler-sfc": "^3.2.26", "algoliasearch": "^4.12.0", "autoprefixer": "^10.4.2", "babel-loader": "^8.2.3", "clean-webpack-plugin": "^4.0.0", "cross-env": "^7.0.3", "css-loader": "^6.5.1", "css-minimizer-webpack-plugin": "^3.2.0", "eslint": "^8.4.1", "eslint-plugin-vue": "^8.2.0", "eslint-webpack-plugin": "^3.1.1", "mini-css-extract-plugin": "^2.4.5", "node-sass": "^7.0.1", "npm-run-all": "^4.1.5", "postcss": "^8.4.5", "postcss-html": "^1.3.0", "postcss-import": "^14.0.2", "postcss-loader": "^6.2.1", "sass-loader": "^12.4.0", "stylelint": "^14.1.0", "stylelint-config-recommended": "^6.0.0", "stylelint-webpack-plugin": "^3.1.0", "tailwindcss": "^3.0.15", "url-loader": "^4.1.1", "vue-loader": "^16.8.3", "webpack": "^5.65.0", "webpack-cli": "^4.9.1", "webpack-merge": "^5.8.0" } }
I tested with tailwind v3.0 by itelself and works fine(the following is the package.json on the environt working). Do you have some idea what would could be the reason?
{ "name": "dev", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^10.4.2", "postcss": "^8.4.5", "tailwind": "^4.0.0", "tailwindcss": "^3.0.15", "vite": "^2.7.13" } }
Are you sure that tailwind doesn't generate those classes? I suspect it could be an issue with the Shopify CLI.
To narrow the problem down, next time you experience something like this look for the tailwind class in question inside the shopify/assets/bundle.css file. If it exists it's probably the Shopify CLI not properly syncing.
I just tried a couple of things out and I'm not experiencing any problems with tailwind class generation when writing classes inside Shopify files.
Ok I will try to start from scratch again to see. I on Mac are you on windows?
Yes, I tried it on windows.
I created the new environment from scratch and it works. But somehow in my development environment new specified class is not generated (either custom one or default ones like p-2, pt2 ...etc ) it could be something to do with html not wellformed. @apply pt-2 works when I specified at <style> but when I have pt-2 inside of template it doesn't generate. I checked asset folder and the class wasn't generated. I need to do some digging but let you know if I find something. Thanks for looking into.
I confirmed that was just Well-formed issues in a liquid file. After I fixed that rest of stuff is working. Thanks for looking into this again :)
You can close this bug now since it was my code problem.