Tailwind bg-color-number
Chris Oliver
Hi Bryan, what I saw was that I could not dynamically change things like bg-color to my custom colors (or even standard colors), so for instance bg-gray-100 and some others would not work but bg-gray-700 did. What I understand happens is the purgeCSS utility removes colors that are not referenced somewhere in the html files in your app. I confirmed this by adding a custom class like "bg-lilac" to a <div>, restarting the server, and seeing the color used in a view. You can override this purceCSS behavior with a safelist option in Tailwind configuration (but this increases the CSS file size). This may be your problem.
Mark Nelson
// See the Tailwind default theme values here:
// https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
plugins: [
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/forms')({ strategy: 'class' }),
require('@tailwindcss/line-clamp'),
require('@tailwindcss/typography'),
],
content: [
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.erb',
'./app/views/**/*.haml',
'./lib/jumpstart/app/views/**/*.erb',
'./lib/jumpstart/app/helpers/**/*.rb',
],
options: {
safelist: [/(from|via|to|border|bg|text)-(.*)-(\\d{1}0{1,2})/]
}
// All the default values will be compiled unless they are overridden below
theme: {
// Extend (add to) the default theme in the `extend` key
extend: {
// Create your own at: https://javisperez.github.io/tailwindcolorshades
colors: {
primary: colors.blue,
secondary: colors.emerald,
tertiary: colors.gray,
danger: colors.red,
"code-400": "#fefcf9",
"code-600": "#3c455b",
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},
// Opt-in to TailwindCSS future changes
future: {
},
}
Your tailwind.config.js is the same as mine (except I have added custom colors after "code-600" and a serif font - which will not make any difference) but I do not have the options with the safelist which you should not need in development. I assume you have not made changes to the postcss.config.js or app/assets/stylesheets/application.tailwind.css files. If the configuration is not the issue then you can try things like rails assets:clean to remove old compiled assets (or even rails assets:clobber to remove all compiled assets - clobber will remove the public/assets directory in addition). I ran rails assets:clobber at one point myself. I am running Overmind which has yarn build:css --watch in the procfile and am on Rails 7.0.2.2 and Ruby 3.1.1. I know how frustrating these Tailwind issues are. The important thing is not to get stuck or discouraged - get on with something else and come back to this if necessary.
I clobbered the assets and was immediately able to see blue-500, then blue-200, changed to another and it stopped working again.
I see this now. I did also try running rails. assets:precompile and restart the server. Yarn gave me a complaint about node incompatibility.. What is everyone using?
I see this now. I did also try running rails. assets:precompile and restart the server. Yarn gave me a complaint about node incompatibility.. What is everyone using?
The asset "application.css" is not present in the asset pipeline.Notifications
You’re not receiving notifications from this thread.