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.
Related
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 was wondering what could be configured in tailwind config file, I just can not grasp what could be configured in this file, specially the base part.
#tailwind base;
#tailwind components;
#tailwind utilities;
Could anybody elaborate this?
Using the #tailwind means to insert Tailwind’s directive. Tailwind supports these four directives base, components, utilities, and screens styles into your CSS.
Base injects Tailwind's base styles like inserting any layout
theme etc. Details use of the base
#layer base {
h1 {
#apply text-2xl;
}
h2 {
#apply text-xl;
}
}
Similarly, components work for extracting some classes like buttons.
You can go through all this for getting hints
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.
I installed tailwindcss following this tutorial: https://tailwindcss.com/docs/guides/create-react-app (using Craco instead of postcss). After I included every code snippet and reloaded the webpage, all the default CSS styles were gone (h1, flex, etc.) Is it because I didn't configure tailwindcss with the whole project right or it's normal to have all the default styling rules deleted and you have to specify the base. By configuring I mean you just need to add:
#tailwind base;
#tailwind components;
#tailwind utilities;
in index.css file only, not every .css component file.
Tailwind Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc.
#tailwind base; /* Preflight will be injected here */
#tailwind components;
#tailwind utilities;
If you would like to stick with default values, then you can disable Preflight
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
}
}
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