I have initialized a new deno vite app and am trying to configure tailwindcss.
The first thing I did was add tailwindcss and postcss to my import_map.json and cache them:
{
"imports": {
"tailwindcss": "npm:tailwindcss#^3.2",
"postcss": "npm:postcss#^8.4"
}
}
I then generated a tailwind.config.js and postcss.config.js with the npx tailwindcss init -p command.
Lastly, I added the #tailwind rules to my index.css file:
#tailwind base;
#tailwind components;
#tailwind utilities;
At this point, I'm actually getting the lint error Unknown at rule #tailwindcss(unknownAtRules) in my index.css file even though I have the tailwindcss vs code extension installed.
When I run my project with deno task dev I get the "Hello World" text showing up but my tailwindcss classes do not take effect, here is my App.jsx file:
function App() {
return (
<div className="bg-red-500 rounded-lg shadow-xl min-h-[50px]">
<p className="text-white">Hello World</p>
</div>
)
}
export default App
Note: I had to delete the postcss.config.js file in order to even run the app.
Are there any other steps I need to take to get tailwindcss working or is it just not compatible at this time?
It seems TailwindCSS doesn't support Deno, see GitHub disscussion: Tailwind CSS support Deno
eg. running deno run -A npm:tailwindcss init fails immediately:
Uncaught TypeError: acorn.Parser.extend(...).extend is not a function
Alternatively I tried to use Windi CSS, but unfortunately the Vite plugin didn't work:
vite:c15:27:24 [vite] The filename, directory name, or volume label syntax is incorrect. (os error 123), stat 'C:\project\!C:\project\node_modules'
Related
I tried using TailwindCSS on MacOS. I installed it with the following command:
npm install -D tailwindcss
Then to create the configuration file, I ran the following command:
npx tailwindcss init
Then I configured my configuration file (tailwind.config.js) to the following code:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
After adding a few files my explorer looks like this:
Finally, I ran the following command expecting some CSS to appear in my output.css file:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
I checked my output.css file and it was empty. By the way, in my input.css file I entered the following lines of code:
#tailwind base;
#tailwind components;
#tailwind utilities;
However after running the previous command saw see the following messages in my terminal:
warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration
Does anyone know why this is not working?
It seems you are exporting the output CSS into ./src.
Try to change the tailwind.config.js into the code below:
module.exports = {
content: ["./dist/**/*.{html,css ,js}"],
theme: {
extend: {},
},
plugins: [],
}
first you click on debug as shown in image and than click on build it will make your style.css written
see this image
[1]: https://i.stack.imgur.com/gPXIk.png
I am pretty new to Tailwind and CSS as a whole and am trying to build this CSS file:
#tailwind base;
#tailwind components;
#tailwind utilities;
.btn{
#apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider
}
With this command
npm run build-css
But I get this response
> course#1.0.0 build-css C:\Users\user\Tailwind\project
> tailwindcss build src/styles.css -o public/styles.css
[deprecation] Running tailwindcss without -i, please provide an input file.
Done in 3220ms.
And nothing happens. How do I specify the input file?
As error says, you need to provide input file with -i flag. Change your script inside package.json to this
tailwindcss -i src/styles.css -o public/styles.css
More information about Tailwind CLI is here
You can try the below command,
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css
Where the file after -i is your source css file where you have extracted the custom css components and -o is where you want your final build file.
For more, have a look at the link in tailwindcss website - Using Tailwind CLI
As you know Tailwind is a very popular PostCSS solution. I want to add TailwindCSS in my Angular app running version 11.2.0 or with older versions. How can I do so?
I decided to post and answer my own question because this is a very popular question I have seen through the Angular community recently
Setup TailwindCSS in Angular 11.2.0
Install with npm install -D tailwindcss
Install TailwindCSS plugins(Optional):
npm i #tailwindcss/typography
npm i #tailwindcss/forms
Create a TailwindCSS configuration file in the workspace or project root. Name that configuration file tailwind.config.js
It should look like this:
module.exports = {
prefix: '',
purge: {
content: [
'./src/**/*.{html,ts}',
]
},
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require('#tailwindcss/forms'),require('#tailwindcss/typography')],
};
In your styles.scss file add the following TailwindCSS imports
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
if you are using CSS not SCSS, your file should look like this:
#tailwind base;
#tailwind components;
#tailwind utilities;
Making sure TailwindCSS in Angular is working
Go to any of you components and write the following:
<button
class="py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400">Hello</button>
Now run ng serve, you should see the following button
How to purge TailwindCSS in Production
If we don't purge, our CSS can be very heavy due to all the CSS classes TailwindCSS adds for you. If you purge, all the unused classes will be removed.
The way I figured to do purging in Angular 11.2.0 are the following ways:
A) This is my preferred way. Add this to your building SCRIPT NODE_ENV=production ng build --prod
and your tailwind.config.js file should look like this.
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'./src/**/*.{html,ts}',
]
},
B) In your tailwind.config.js file you can set the enabled property inside of the purge property to true. This will run purge all the time, be aware of that.
....
prefix: '',
purge: {
enabled: true,
content: [
'./src/**/*.{html,ts}',
]
},
....
Then you can run ng build --prod and you will see your bundle since getting smaller.
Before purging
After purging
To learn more about Angular (11.2.0 or older version) with TailwindCSS, look at my article
https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l
I am learning laravel version 8.
when trying to install tailwind CSS using the npm command.
npm install tailwindcss#npm:#tailwindcss/postcss7-compat #tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
Here described what I did step by step
1.installed fresh laravel 8 using laravel installer.
2.run npm install
3.then npm install tailwindcss#npm:#tailwindcss/postcss7-compat #tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
4.after npx tailwindcss init
5.and edit tailwind.config.js like this
module.exports = {
purge: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {}
},
variants: {
extend: {}
},
plugins: []
};
6.In webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
require("autoprefixer"),
]);
7.import the tailwind css in app.css
#import "tailwind/base";
#import "tailwind/components";
#import "tailwind/utilities";
8.after run npm run dev. I have faced an error in the command line.
Can anyone HELP me out
I got help with Learn-YT
He suggested editing the code github
the error from the css/app.css. changed the code like this
#import "~tailwindcss/base.css";
#import "~tailwindcss/components.css";
#import "~tailwindcss/utilities.css";
after this, it's working correctly.
The official documentation did not help me, but this is the way I successfully installed Tailwind to Laravel 8:
npm install tailwindcss
Replace content of /resources/sass/app.scss with this:
#tailwind base;
#tailwind components;
#tailwind utilities;
Generate Tailwind config file using command npx tailwind init
Open the tailwind.config.js and change line purge: [], to:
purge: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue"
],
Change content of webpack.mix.js to:
const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");
mix.js("resources/js/app.js", "public/js")
.vue()
.sass("resources/sass/app.scss", "public/css")
.options({
processCssUrls: false,
postCss: [tailwindcss("./tailwind.config.js")]
});
Then, of course, run npm run dev or npm run prod, and enjoy.
P.S.: If you ran in any case composer require laravel/ui and/or php artisan ui vue --auth after this, you will have to repeat the process since these commands will change content of your files. I advise you to run these commands before configuring Tailwind. Make sure also to first run npm install before all this.
So this is my first time using Typescript and Tailwind. I already followed tailwind guide for create-react-app but when I try to run npm start I got this error:
./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
TypeError: Object.entries(...).flatMap is not a function
at Array.forEach (<anonymous>)
this is my index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
body {...
I got warning in index.css Unknown at rule #tailwind css(unknownAtRules)
and this is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<div className="px-4 py-2 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-700">tombol</div>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
This is strange. Try to update your Node.js to the latest current stable version and try again.
Update NodeJS using nvm by following the steps from this link:
https://learn.microsoft.com/en-us/windows/nodejs/setup-on-windows
Make sure you have uninstalled the previous node_modules folder from your project.
Follow these steps
Install RimRaf:
npm install rimraf -g
And in the project folder delete the node_modules folder with:
rimraf node_modules
Reference: How to Delete node_modules - Deep Nested Folder in Windows
Add VS Code extension postcss language support
Create or edit .vscode/settings.json and add:
{
"files.associations": {
"*.css": "tailwindcss"
}
}
Additionally the VSCode extension is helpful - these notes are from their docs.