[Poi] Setup PostCSS and Tailwind with Poi
and with POI setup
2023-09-14 09:00:50 时间
This lesson walks through setting up a Poi project using PostCSS and the popular Tailwind library for building out your styles. Poi supports PostCSS out of the box, but to show the true power of PostCSS, you need leverage PostCSS plugins which requires its own bit of setup.
Install:
npm i -D tailwindcss
Init tailwind:
npx tailwind init
It will generate a tailwind.js file.
Create a postcss.config.js:
const tailwindcss = require('tailwindcss'); module.exports = { plugins: [ tailwindcss("./tailwind.js") ] };
index.js:
import "./style.css"; document.querySelector("#app") .innerHTML = ` <div class="hello">Hello Tailwind</div> `;
style.css:
@tailwind preflight; .hello { @apply .text-white .bg-grey } @tailwind utilities;
相关文章
- codeforces Soldier and Number Game(dp+素数筛选)
- Activity, Service,Task, Process and Thread之间的关系
- [React] Performance: Split state update and component render with Hoc
- [Angular 8] Custom Route Preloading with ngx-quicklink and Angular
- [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS
- [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
- [Tool] Open Multiple Terminal Tabs on npm Start with ttab and npm-run-all
- [Poi] Setup PostCSS and Tailwind with Poi
- [Poi] Build and Analyze Your JavaScript Bundles with Poi
- [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself
- [Nuxt] Load Data from APIs with Nuxt and Vuex
- [Node.js] Test Node RESTful API with Mocha and Chai
- [Redux] Avoiding Array Mutations with concat(), slice(), and ...spread
- C Packet Sniffer Code with Libpcap and Linux Sockets (BSD)
- [CSS] Use CSS Variables with Calc and HSL to Implement Dark Mode
- [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript
- [D3] Load and Inspect Data with D3 v4
- [Redux] Accessing Dispatch and State with Redux -- connect
- [TypeScript] Using Typings and Loading From node_modules
- [RxJS] Aggregating Streams With Reduce And Scan using RxJS
- [Angular] Promises, reject(). 4. ngRoute, $routeChangeError event and defer.reject()
- ora-00054:resource busy and acquire with NOWAIT specified
- What is the difference between BTD and Q35
- Atitit. Xss 漏洞的原理and应用xss木马
- 【Codeforces 584D】Dima and Lisa
- 【Codeforces Round #299 (Div. 2) B】Tavas and SaDDas
- 3GPP TS 29244-g30 中英文对照 | 5.4.2Service Detection and Bearer/QoS Flow Binding
- How to working with dates and times?