i've followed this guide : https://tailwindcss.com/docs/guides/remix
step by step (twice,to be sure). yet nothing works.
my tailwind config js looks like that :
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
My root:
import styles from './styles/app.css';
export function links() {
return [{ rel: 'stylesheet', href: styles }];
}
I've created a new folder called styles inside app folder and inside the styles i've created app.css which has the following :
#tailwind base;
#tailwind components;
#tailwind utilities;
I'm trying to style my index.tsx
export default function Index() {
return (
<div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
<h1 className='text-3xl font-bold text-blue-500 underline'>Hello world!</h1>
</div>
);
}
i run : "npm run dev" yet i get no style over my h1 in the index.
any help appreciated.
You need to create 2 new "styles" folders, the first at the same level as the package.json, and create the app.css file in this place with the code:
./styles/app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
The second styles folder are inside "app" directory (here the tailwind command will export the compiled CSS)
./app/styles/app.css this is the output of the tailwindcss command
Then you can import the ./app/styles/app.css file in the root.js(x) file
import styles from "./styles/app.css"
export function links() {
return [{ rel: "stylesheet", href: styles }]
}
i had the same problem and i want to add to #Michael's that it worked for me when i included the <Links /> component from remix inside the head.
import { Links } from '#remix-run/react'
<head>
<Links />
...
</head>
your links() function will not be included otherwise.
Related
I'm trying to use Tailwind CSS with Vuepress 2.
I have installed npm install -D tailwindcss#latest postcss#latest autoprefixer#latest.
In my .vuepress/config.js file I have:
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default {
title: 'Frontend Library',
port: 8081,
...
bundlerConfig: {
viteOptions: {
css: {
postcss: {
plugins: [tailwindcss, autoprefixer]
}
}
}
}
}
I have also docs/.vuepress/styles/index.scss file:
#tailwind base;
#tailwind components;
#tailwind utilities;
There is no error, but Tailwind styles are not applied though..
Any ideas?
Thanks
I'm using Laravel Vite and have this in my app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#import 'animate/base.css';
#import 'animate/animations.css';
#layer components {
.ql-container {
#apply border-2 border-slate-300;
}
}
And postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
}
The ql-container custom Tailwind styles are not getting compiled and I'm not sure why. This is how it's defined in the Tailwind docs.
If the class ql-container is added inside an #layer directive and its use is not detected by Tailwind in any of your templates, then it will not be included in the css output.
If it is not wrapped in a directive then it will always be added to the css output, so just don't wrap the style with #layer components { ... }.
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>
Need to use tailwind in a next.js project, but only in one page
How to import the Tailwind directives
#tailwind base; #tailwind components; #tailwind utilities;,
without affecting all other pages?
You can follow the same steps as mentioned here.
However in Step 3 , just give the path of your only file where you want Tailwindcss.
module.exports = {
content: [
"./pages/<path_of_your_file>",
],
theme: {
extend: {},
},
plugins: [],
}
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>