I'm following the Tailwind CSS documentation, but after I rebuild the CSS file, the font class does not appear in the generated file for some reason. So, I went to Google Fonts and copied the import and pasted it into a CSS file I want to compile, and it looks like this:
styles.css
#tailwind base;
#tailwind components;
#import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Lato:wght#300;400;700;900&family=Roboto:wght#400;500;700&family=Rubik:wght#400;500;700&display=swap');
#tailwind utilities;
Then I went to the Tailwind config file and added fontFamily.
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
},
fontFamily: {
'body': ['Lato'],
}
},
variants: {
extend: {},
},
plugins: [],
}
At last, I used this command to recompile
npx tailwindcss build styles.css -o output.css
If I try to apply the class "font-body," it doesn't work, and that makes sense since the class is not in output.css
Few mistakes that I see in your code are:
The import statement should always be on the top of the file
Your configuration should be like this
fontFamily:{
'Lato':{'Lato', 'sans-serif'}
}
You should use the css rules to specify as mentioned in google fonts.
Your import statement has 3 fonts. If you are only using Lato, remove the others and configure them properly for your own better understanding.
We should generally rebuild our css file, if you have done major changes. Rebuilding is not necessary in v.2. Using :
npm build YOUR_FILE.css
and restarting dev server should work. No need of creating another output file.
Related
Do we have to write it inline like:
index.css file which contains all tailwind starters
#tailwind base;
#tailwind components;
#tailwind utilities;
or in separate files like:
index.css
file1.css
file2.css
Your index.css file can contain utility classes.
You use a tailwind command tailwind -i index.css -o output.css to build and generate a css file.
In your html file: you need to use tailwind inline in class attribute:
<body class="text-white border border-blue-400">
you rest of body
</body>
One last this you need is tailwind configuration file, which is automatically created when you run tailwind init in your working directory. This configuration file looks something like this:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['**/*.html'],
theme: {
extend: {},
},
plugins: [],
}
The purpose for this file is to check if any html file is using tailwind classes and if so based on that render output.css when you run build command.
I am developing an Angular 12 project with Tailwind CSS installed. I have followed the official docs and it seems everything works; but I can´t understand why some classes work and others not.
For example, I can have this piece of code, trying to add two Tailwind classes on my div:
<div class="text-center mt-2">
<h2>Please go back to <a class="custom-links" href="./login">login</a></h2>
</div>
And the text-center class works, but the mt-2 doesn´t. This kind of things is happening on the whole project. The way I had to solve it is using traditional CSS or mixing it with Tailwind, like this:
<div id="back-to-login" class="text-center">
<h2>Please go back to <a class="custom-links" href="./login">login</a></h2>
</div>
And on the css:
#back-to-login{
margin-top: 40px;
}
Then it works fine and the margin-top is applied.
Do you know what could be happening?
Reinstalling node_modules like suggested here doesn´t solve it.
Thanks a lot.
I add the code of the styles.css and tailwind.config
styles.css
/* You can add global styles to this file, and also import other style files */
#tailwind base;
#tailwind components;
#tailwind utilities;
#font-face {
font-family: "firechat";
src: url(./assets/fonts/blazed/Blazed.ttf);
}
/*
to change the default h1 styles on tailwind
https://tailwindcss.com/docs/preflight#extending-preflight
*/
#layer base {
h1 {
#apply text-6xl;
}
}
/*tailwind and own styles*/
#firechat-font{
font-family: "firechat";
color:red;
}
.custom-links{
color:red;
font-weight: bold;
}
Tailwind config file:
module.exports = {
content: [
"./src/**/*.{html,ts}"
],
theme: {
extend: {},
},
plugins: [],
}
EDIT: What I am seeing now is that for example mt-2 applies and appear on devTools (maybe problem was it was to small change to notice, my fault), but a bigger margin like mt-4 or mt-6 doesn´t. It happened also with other properties.
For some reason, in my styles.scss, I had to import the variables as follows
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
instead of
#tailwind base;
#tailwind components;
#tailwind utilities;
reload and it worked. Angular version 14.1.0, Tailwindcss version 3.1.7
Angular 14
Try tailwind.config.js like this
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],
theme: {
extend: {},
},
plugins: [],
}
It seems that you've installed the latest version of tailwind with angular 12 maybe something is wrong with it? Try install tailwind v2 and see if it works. Some breaking changes could happen since tailwind v3
Thanks to #MaksatRahmanov I found the solution. It seems the problem was I installed the latest Tailwind version (v3) with Angular 12. I switched back to v2 and everything works fine.
The only problem with it is that many things have changed between both versions (check here), so it could break many things working properly with v3.
Check out this tutorial: https://medium.com/tunaiku-tech/angular-11-tailwindcss-2-0-blazing-fast-cfa20ae3a5e9. In that tutorial, TailwindCSS version 2 is used. If you want TailwindCSS version 3, then kindly change the configuration file to match the TailwindCSS version 3 config file. By setting up the angular project as mentioned in the above tutorial TailwindCSS version 3 is working fine.
This also happened to me. I checked my tailwind.config.js many times, and
content: [
"../src/**/*.html"
]
...should be enough.But for some reason unknown to me, it just doesn't rebuild on adding new classes. So, same as you, I didn't see new classes in built CSS files. I almost gave up, but in the end here is my workaround:
src/tailwind.scss:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
New script in package.json, called "tailwind" - it watches for changes in your HTML and rebuilds your css.
postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Also installed npm-run-all, so I can on "npm run start" serve and watch tailwind for changes:
"scripts": {
"ng": "nx",
"serve": "ng serve --configuration=dev",
"start": "npm-run-all --parallel serve tailwind",
"tailwind": "npx tailwindcss --postcss -i ./src/tailwind.scss -o ./src/app/scss/tailwind.css --watch"
}
angular.json:
"styles": [
"src/app/scss/tailwind.css"
]
And there you go. You will serve and rebuild CSS whenever new classes are added to your HTML files. I know it's a workaround, but at least it works 100%.
I'm using Flowbite (both JS and CSS) in my application. JS was inserted and works (using Webpack and import 'flowbite' in the entry point JS).
For the CSS, I'm using this in the tailwind.config.js file as the documentation tells you to do.
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {}
},
plugins: [
require('flowbite/plugin')
]
}
However when compiling everything (npx tailwind build) the CSS doesn't seem to be included in the final CSS file.
I can tell because the FlowBite modal should have a dark background (making everything except the modal darker), but that background does not appear when creating the compiled CSS.
When I do include the flowbite.css manually though, it does render correctly. So the current working solution I have is (in my HTML):
<!-- TODO: Adding the plugin in tailwind.config.js does not work -->
<link rel="stylesheet" href="https://unpkg.com/flowbite#latest/dist/flowbite.min.css" />
But I'd like to have it compiled automatically from the Tailwind build command.
Someone in the Discord community answered to me directly. I had to include this:
module.exports = {
content: ['./src/**/*.html', './node_modules/flowbite/**/*.js'],
plugins: [
require('flowbite/plugin')
]
}
The './node_modules/flowbite/**/*.js' in content was missing.
Tried many way doesn't work.
So I have quick fix, add this css:
.h-modal{
background-color: rgba(0,0,0,0.3);
}
I have included css files in to nuxtJs config file,
so i want to minify them but i do not want to extract them to external css file.
Is there any way of doing this?.
Code
/*
** Global CSS
*/
css: [
"~/assets/css/tailwind.css",
"~/assets/scss/styles.scss",
"~/static/js/plugins/slick/slick.css",
"~/static/js/plugins/fotorama/fotorama.css",
"swiper/dist/css/swiper.css"
],
build: {
extractCSS: false,
}
You can use PurgeCSS and the module for NuxtJS
I cannot find a good way to scope tailwind CSS when including it in a system where I don't want it to apply globally that works with custom build options.
Essentially I want to do this:
.tailwind{
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
}
But PostCSS importer doesn't like this due to the fact it imports before the tailwind placeholders are replaced. So the only way to make it work is to break the build into 2 stages then import the compiled css like:
.tailwind{
#import "tailwindcss.css";
}
It works but it breaks some of the css rules which show up in dev tools.
Is there a better way to scope tailwind to stop it interfering with other systems?
I've found that you can use postcss-nested for this. Install the plugin, add it as the first plugin to your PostCSS config file and this should work:
.tailwind {
#tailwind base;
#tailwind components;
#tailwind utilities;
#tailwind screens;
}
From the docs...
The prefix option allows you to add a custom prefix to all of Tailwind's generated utility classes. This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts.
For example, you could add a tw- prefix by setting the prefix option like so:
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
You will achieve this by setting important in the tailwind config to your parent class or id. See docs.
// tailwind.config.js
module.exports = {
important: '.tailwind',
}
Unfortunately, this seems to only be affecting the components and utilities styles... the base styles will remain unaffected.
As requested leaving my answer here:
I used the prefix as suggested by Lanny
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
And then made my tailwind css file like this:
#import "tailwindcss/components";
#import "tailwindcss/utilities";
Then I just manually copied any base styles that I wanted manually into my main css file and manually changed anything that conflicted.
I think the tricky part here is actually about the preflight/reset.css. You want to fend off external styling from coming to your scope but also don't want to pollute the external system with your tailwind style.
My current set up include following steps:
In tailwind.config.js we disable the prefight, defining a prefix tw-, and adding an extra selector #app via option important. The last change will add an extra css selector to output, e.g. #app .tw-mb-4.
module.exports = {
important: '#app',
prefix: "tw-",
corePlugins: {
preflight: false,
},
Find and copy the content of base.css from node_modules folder before pasting it into a scss file with a parent selector #app. You can compile this using any online SCSS compiler. This will help you only reset styling within your scope.
#app {
/*content from base.css*/
}
Copy compiled the styling from #2 and paste to the beginning of your tailwind css file.
Structure the html so you contents are wrapped within a div with the id of #app.
Tailwind's important option doesn't seem to add selector to #layer component so you will have to include that in your component styling.
#layer components {
#app .page-h1 {
#apply tw-mt-0 tw-mb-2 tw-text-center tw-leading-8 tw-text-4xl md:tw-text-5xl;
}
}
According to the docs:
If you’d like to completely disable Preflight — perhaps because you’re integrating Tailwind into an existing project or because you’d like to provide your own base styles — all you need to do is set preflight to false in the corePlugins section of your tailwind.config.js file.
This seems to work with Wordpress in the admin but it does remove the normalization, like cursor: pointer on button hover, for example.
What I have done is this
module.exports = {
prefix: 'tw-',
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
purge: {
enabled: true,
content: ['./src/**/*.{html,ts}']
},
plugins: [],
corePlugins: {
preflight: false,
}
}
It will reduce build size as ,I have purged CSS, disable global CSS,as I have used preflight, and now If u want to apply tailwind class use as
<div class="tw-m-4"></div>
As we have used tw in prefix