How to use Color in TailWind CSS ?
I am learning TailWind CSS.I am using TailWind CSS in Laravel.
My tailwind.config.js is like below
const { colors } = require('tailwindcss/defaultTheme')
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
cadetblue:'#5f9ea0',
},
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
I declared CSS inside <head></head> is like below.
<style>
.hello { background-color: theme('colors.cadetblue'); }
</style>
I am using .hello class in HTML like below.
<div class="hello">Hello</div>
But this is not working.
Firstly, you need to define colors object array in your custom theme file, because your tailwind config will overide the default. So please check your colors import is same with official doc,
const colors = require('tailwindcss/colors')
Solution 1
Define your custom color name into theme.colors
const colors = require("tailwindcss/colors");
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
...
theme: {
...
colors: {
cadetblue: "#5f9ea0",
},
...
Solution 2
In other way, you can simplly adjust it with define in your main css file like this, Official Doc Link
// in your css file
#tailwind base;
#tailwind components;
#tailwind utilities;
...
# You can add your custom class name into `utilities`
#layer utilities {
.bg-cadetblue {
background-color: #5f9ea0;
}
}
and use it
<div class="bg-cadetblue">Hello</div>
ps, restart your app with npm run start or yarn start required!
Happy coding :)
In tailwind-3 you could pass the exact color inline if you use [ ]:
<div class="bg-[#5f9ea0]">Hello</div>
Related
I use tailwind in nextjs project, and when I restart the server (I mean start the server again with npm run dev) some tailwind code not working when I write class property in "inspect Element" it works but not tailwind code.
not works: w-1/2 (width: 25%), lg:w-0 (media screen and(max-width: 1024px) {code})
my tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
screens: {
sm: { max: "640px" },
md: { max: "768px" },
lg: { max: "1024px" },
xl: { max: "1280px" },
"2xl": { max: "1536px" },
}
},
plugins: [],
};
my global.css file:
#tailwind base;
#tailwind components;
#tailwind utilities;
#import "./reset.css";
You need to pass the classes fully w-1/2 instead of partially like 1/2. As tailwind doesn't support dynamic classes.
Try the following code.
function Component({ width}) {
return (
<div
className={`${width}`}
>
Hello there
</div>
);
}
And use it as
<Component
width={"w-1/2"}
/>
Edit: Using Safelisting classes
As a last resort, Tailwind offers Safelisting classes
Safelisting is a last-resort, and should only be used in situations where it’s impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature.
In your example,you want to have different width. You can use regular expressions to include all the widths you want using pattern
In tailwind.config.js
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
safelist: [
{
pattern: /w-(1/2|2/2|1/6|2/6)/, // You can define all the width you desire
},
],
// ...
}
you have to create an extend object with your personalized code inside like this:
theme: {
extend: {
screens: {
'clg': '1090px',
'cxl': '1159px',
'c2xl': '1213px',
'c3x1': '1373px',
'c4x1': '1480px',
'c5x1': '1579px',
'c6x1': '1679px',
'c7x1': '1740px',
'c8x1': '1820px',
},
I got a problem using tailwind css with Vue3. Looking at the network tab it's size is 4.4 MB.
The postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
cssnano: {}
}
}
tailwind.config.js
module.exports = {
content: [
"./frontend/**/*.{js,jsx,ts,tsx,vue}",
"./app/views/**/*.html.erb"
],
prefix: 'tw-',
...
cssnano is added using yarn.
yarn.lock
cssnano-preset-default#^5.2.12:
cssnano#5.1.13
tailwindcss#^2.1.4:
Importing tailwind in main.css which itself is imported in the vue entrypoints.
#tailwind utilities;
#tailwind base;
#tailwind components;
Whether in development nor in production the size of main.css changes.
All right, I solved it. The version of tailwind I'm using ain't compatible with the "content" setting in the current documentation. I still have to use this syntax:
purge: {
enabled: true,
content: [
"./frontend/**/*.{js,jsx,ts,tsx,vue}",
"./app/views/**/*.html.erb"
],
},
Also needed to do a re-build of the prod environment.
You have also the mode JIT it will generates your styles on-demande https://v2.tailwindcss.com/docs/just-in-time-mode
I have a project in Next.js but can't figure out how to use Google Font with Tailwind CSS.
First You have to Add imported font Url in globals.css in the styles folder and For React.js It will be index.css in the src folder.
e.g.
#import url("https://fonts.googleapis.com/css2?family=Play:wght#400;700&display=swap");
#tailwind base;
#tailwind components;
#tailwind utilities;
Then Extend modules.exports in the tailwind.config.js file
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
play: ["Play", "sans-serif"],
},
},
},
plugins: [],
};
Finally, you can use this font anywhere e.g.
<h2 className="font-play text-5xl font-bold uppercase">
Hello World!
</h2>
In React Js
Step 1: Import Google font in index.css
#import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
Step 2: Configure Google Font in Tailwind CSS
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
extend: {
fontFamily: {
pacifico: ['"Pacifico"', ...defaultTheme.fontFamily.sans],
}
}
},
}
Step 3: Use your custom google font
<h1 class="pacifico">Pacifico is Google Font</h1>
I am trying to use #apply on my custom class in Nuxt.js 2
nuxt.config.js
export default {
buildModules: [
'#nuxtjs/tailwindcss',
],
tailwindcss: {
cssPath: '~/assets/app.css',
exposeConfig: true
}
}
assets/app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
.btn {
#apply border-2 p-2 font-bold;
}
}
in any vue-single-file or any other scss file
<style lang="scss">
.btn-lg {
#apply btn;
}
</style>
The btn class does not exist. If you're sure that btn exists, make sure that any #import statements are being properly processed before Tailwind CSS sees your CSS, as #apply can only be used for classes in the same CSS tree
So, how to make my custom styles be seen by the Tailwind CSS before processing to make my custom classes work in #apply?
I've tried the solutions in the following questions and document
adding-custom-utilities
not able to use custom classes in #apply in scss file tailwind nextjs project?
But none of them work
I am using:
Tailwindcss 2.2.19 via #nuxtjs/tailwindcss
Nuxt.js 2.15.8
Thanks a lot for any replies!
As I mentioned in the comments, add a mode: "jit" can solve this problem.
tailwind.config.js
module.exports = {
mode: 'jit'
}
It's a good vanilla solution.
However, if you are programming the project in a virtual machine(Homestead) just like me, this could cause a error that the node can't recoginze the changings of your css/scss/sass files.
so there's another two solutions:
use pure tailwindcss instead of #nuxtjs/tailwindcss
just follow the document: Install Tailwind CSS with Nuxt.js
use plugin() in your tailwind.config.css
const plugin = require('tailwindcss/plugin')
const fs = require('fs')
module.exports = {
// ... purge, theme, variants, ...
plugins: [
plugin(function({ addUtilities, postcss }) {
const css = fs.readFileSync('./your-custom-style-file-path', 'utf-8')
addUtilities(postcss.parse(css).nodes)
}),
],
}
from github
But what's more, this solution can't recoginze the changings too. So add your css/scss/sass files in nuxt.config.js (I'm using nuxt-vite)
vite: {
plugins: [
{
name: 'watch-external', // https://stackoverflow.com/questions/63373804/rollup-watch-include-directory/63548394#63548394
async buildStart(){
const files = await fg(['assets/**/*']);
for(let file of files){
this.addWatchFile(file);
}
}
}
]
}
In tailwind.config.js im trying to define green at the same time as setting header... is this possible? If not; is there another way? Can these be modified at runtime?
{
theme: {
colors: {
'green': '#36D585',
'header': theme => theme('colors.green')
}
}
}
Assuming you want an alias of header to be the same color as green, I would suggest defining an object containing your colors, then referencing that in your config exports, since the theme function is only available in top-level theme keys.
// tailwind.config.js
const customColors = {
green: '#36D585',
// ...
}
module.exports = {
theme: {
colors: {
...customColors,
header: customColors.green
}
}
}
As for changing things at runtime, you wouldn't be able to dynamically update the colors in Tailwind since the CSS is generated at build time. However, you can use CSS custom properties to dynamically update things in the browser. See the Tailwind docs for more information.
// tailwind.config.js
module.exports = {
theme: {
colors: {
header: 'var(--color-header)'
}
}
}
/* main.css or where your CSS is */
:root {
/* updating this value with Javascript will reactively update the colors */
--color-header: #36D585;
/* ... */
}
#tailwind base;
#tailwind components;
#tailwind utilities;