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.
Related
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'
I followed the following guide:
https://getbootstrap.com/docs/5.2/getting-started/vite/
and I still get all sorts of errors, sometimes file is not found or sometimes I just don't see the bootstrap design.
I installed Bootstrap using npm:
npm install bootstrap#5.2.2
Then I installed scss using npm:
npm i --save-dev sass
Then I added the following to vite.config.js:
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'nodes_modules/bootstrap'),
}
}
Also added the following to /resources/app.js:
import '/resources/scss/styles.scss'
import * as bootstrap from 'bootstrap';
I also created a new scss folder in /resources and placed the following styles.scss file inside:
// Import all of Bootstrap's CSS
#import "~bootstrap/scss/bootstrap";
But when I use npm run dev or build, the Bootstrap styling don't show up, or I'm getting error about files not existing, for example:
[plugin:vite:css] [sass] ENOENT: no such file or directory, open '/var/www/myapp/nodes_modules/bootstrap/scss/bootstrap
Install Bootstrap 5 in Laravel 9 with Vite
Install Bootstrap 5 and dependencies
To install Bootstrap from the command terminal execute the following instructions
npm i bootstrap sass #popperjs/core --save-dev
Configure Vite and dependencies
Rename the file: resources/css/app.css to: resources/css/app.scss
Open the vite.config.js file found in the root of the project and change the reference resources/css/app.css to resources/css/app.scss
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
In the resources/css/app.scss file import Bootstrap by adding the following line of code
#import 'bootstrap/scss/bootstrap';
In the file resources/js/bootstrap.js add the following lines
...
import * as Popper from '#popperjs/core'
window.Popper = Popper
import 'bootstrap'
...
Change .blade for Hot reloading
In the resources/views/welcome.blade.php file, paste the following code before the closing tag:
...
#vite(['resources/js/app.js', 'resources/css/app.scss'])
</head>
<body>
...
Test
Run dev server with command:
npm run dev
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
For a project, I'm using a library that I have built in order to share Vue components across the different applications.
So I import my component library as a npm module and I added it to the application package.json and that works fine.
The problem is that when I try to import something in the single component in the components library the application can't solve the dependencies of that component.
e.g component in the component library:
<template>
<!-- my html -->
</template>
</script>
// my script
</script>
<style scoped>
// here I import the basic style for the component:
#import "../../assets/base";
in the application package.json I have:
"components": "git+ssh://git#git.xxxxx.com:xxxxx/xxxxx/my-library.git#development",
and then I use the component normally in my project like this:
import MyComponent from "./components/MyComponent.vue";
The component library works fine, but when I import the component in the application I get the following error from webpack:
This dependency was not found:
* -!../../../../css-loader/index.js?sourceMap!../../assets/base in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-28803148","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/components/src/core/MyComponent.vue
To install it, you can run: npm install --save -!../../../../css-loader/index.js?sourceMap!../../assets/base
Of course if I substitute the #import with the actual css needed everything works fine. How can I make this configuration works?
My bad, the error was simply not adding lang="scss" in the style declaration of the component:
<style scoped>
this should be:
<style scoped lang="scss">