Hi - I'm trying to highlight an anchor tag in blue using tailwind css, which should be dead simple, but it is not working.
{{-- 1st step --}}
{{-- index.blade.php --}}
<a href="{{ route('admin.loginAs') }}" class="text-indigo-600">
Log In As...
</a>
I refresh the page, the link displays in dark indigo.
{{-- 2nd step --}}
{{-- index.blade.php --}}
<a href="{{ route('admin.loginAs') }}" class="text-blue-600">
Log In As..
</a>
I refresh the page, the link displays in black. I add a configuration into tailwind.config.js
{{-- 3rd step --}}
{{-- tailwind.config.js --}}
module.exports = {
theme: {
colors: {
'anchor-blue': 'text-blue-600',
}
}
{{-- index.blade.php --}}
<a href="{{ route('admin.loginAs') }}" class="text-anchor-blue">
Log In As...
</a>
I 'npm run dev' and refresh the page, the link displays in black even though text-anchor-blue displays as an option choice in my IDE (phpstorm). I remove the tailwind.config.js changes and re-run 'npm run dev'
{{-- 4th step --}}
{{-- index.blade.php --}}
<a href="{{ route('admin.loginAs') }}" style="color: blue;">
Log In As...
</a>
I refresh the page, the link displays in blue. Tailwind css is great, so I'm sure that I'm just missing something. All help is appreciated! Best - Rick
Make sure you followed the installation guide for Laravel: https://tailwindcss.com/docs/guides/laravel
tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
You overwrite all colors. They should be in extend if you want to add extra colors. Check the boilerplate posted by @mohamedtammam
Thanks for the responses; I think I have that covered:
{{-- webpack.mix --}}
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
require('autoprefixer'),
]);
{{-- tailwind.config.js --}}
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/**/*.js',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
'anchor-blue': '#2563eb',
},
},
listStyleType: {
none: 'none',
disc: 'disc',
decimal: 'decimal',
square: 'square',
roman: 'upper-roman',
}
},
plugins: [require('@tailwindcss/forms')],
};
Am I missing something ? I've tried both placing the 'colors' under the 'theme' branch as described here: https://tailwindcss.com/docs/customizing-colors and under the 'extends' branch with the same result.
@Rretzko what you have there should work. Did you add tailwind to your css files and recompile (mix i assume?)
Hi @sinnbeck - Here's my resources/css/app.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
I'm running npm run dev but do I need to do something else to recompile? My public/css/app.css runs 1684 lines but phpstorm is throwing 'unresolved custom property' errors.
@Rretzko check the output css file in the public directory. Search the file for a class that you know you have used in a view file (only used classes are added)
@sinnbeck OK, I checked the public/css/app.css file for text-anchor-blue and did NOT find it. I then re-ran npm run dev and rechecked. It took a couple of iterations, but it is now displaying and the anchor links now are blue. Thanks for the help improving my knowledge of how these files fit together and troubleshooting!
@Rretzko happy to help
Please or to participate in this conversation.