当前位置：首页 > 软件库 > 手机/移动开发 > >

tailwind

授权协议 Readme

开发语言 JavaScript TypeScript

所属分类手机/移动开发

软件类型开源软件

地区不详

投递者祁景山

操作系统 iOS

开源组织无

适用人群未知

软件概览

@nativescript/tailwind

Makes using Tailwind in NativeScript a whole lot easier!

<label
  text="TailwindCSS is awesome!"
  class="px-2 py-1 text-center text-blue-600 bg-blue-200 rounded-full"
/>

Usage (with @nativescript/webpack version 5.x)

Install @nativescript/tailwind and tailwindcss

npm install --save @nativescript/tailwind tailwindcss

Change your app.css or app.scss to include the tailwind utilities

@tailwind components;
@tailwind utilities;

Start using tailwind.

Using TailwindCSS JIT (just in time)

Tailwind's new jit mode is supported, it just has to be enabled in the config. See https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode for details.

To generate a blank config, you can run

npx tailwindcss init

Example config with jit enabled:

// tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    './app/**/*.{css,xml,html,vue,svelte,ts,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Using a PostCSS config

In case you need to customize the postcss configuration, you can create a postcss.config.js (other formats are supported, see https://github.com/webpack-contrib/postcss-loader#config-files) file and add any customizations, for example:

// postcss.config.js

module.exports = {
  plugins: [
    tailwindcss: { config: "./tailwind.config.custom.js" },
    "@nativescript/tailwind",
  ],
};

Note: if you want to apply customizations to tailwindcss or @nativescript/tailwind, you will need to disable autoloading:
ns config set tailwind.autoload false
This is required only if you make changes to either of the 2 plugins - because by default postcss-loader processes the config file first, and then the postcssOptions passed to it. With autoloading enabled, any customizations will be overwritten due to the loading order. Setting tailwind.autoload to false just disables the internal loading of these plugins, and requires you to manually add them to your postcss config in the above order.

Usage (with @nativescript/webpack version <5.x)

This usage is considered legacy and will not be supported - however we are documenting it here in case your project is still using older @nativescript/webpack.

See instructions

npm install --save-dev @nativescript/tailwind tailwindcss postcss postcss-loader

Create postcss.config.js with the following:

module.exports = {
   plugins: [
       require('tailwindcss'),
       require('nativescript-tailwind')
   ]
}

Change your app.css or app.scss to include the tailwind utilities

@tailwind components;
@tailwind utilities;

Update webpack.config.js to use PostCSS

Find the section of the config that defines the rules/loaders for different file types.To quickly find this block - search for rules: [.

For every css/scss block, append the postcss-loader to the list of loaders, for example:

{
  test: /[\/|\\]app\.css$/,
  use: [
    'nativescript-dev-webpack/style-hot-loader',
    {
      loader: "nativescript-dev-webpack/css2json-loader",
      options: { useForImports: true }
    },
+   'postcss-loader',
  ],
}

Make sure you append postcss-loader to all css/scss rules in the config.

Usage with the pre-built css

@nativescript/tailwind ships with a pre-built dist/tailwind.css file that's built using the default tailwind config.

Using the pre-built css is not recommended, since you lose the ability to configure tailwind, jit, purging etc.

See instructions

Import the pre-built css file in your app.css (or scss):

@import "@nativescript/tailwind/dist/tailwind.css"

Alternatively, import it in your main.js (or main.ts, app.js, app.ts etc.)

import '@nativescript/tailwind/dist/tailwind.css'

In .vue files you can also do

<style src="@nativescript/tailwind/dist/tailwind.css" />

Note: make sure you only include this once (for example in App.vue) - otherwise your bundle will contain the whole tailwind.css file multiple times.

使用案例

Tailwind 初识

Tailwind 宣称无需离开您的 HTML ，即可快速建立现代网站。本人并没有结合 angular + tailwind 实际开发过，但是结合 react + tailwind 有实际的项目经验。嗯～ OK，这就是个样式框架，加在哪个前端框架上都一样～下面我们进入主题支持响应式不支持响应式的框架不是一个好的样式框架，tailwind 根据常用的设备分辨率方案，设定不同的类名。这些类名
TailWind 使用指南

CSS 的缺点没有本地作用域 CSS 没有本地作用域，所有声明的样式都是全局的。SPA 应用流行之后这个问题更加突出了，会增加样式冲突的概率。由于 CSS 没有本地作用域，所以很难为选择器起名字，如果你起了一个名为 .title 的样式名，这是一个很常见的类名，所以很容易跟页面上其它选择器发生冲突，所以你不得不手动为这个类名添加一些前缀，例如.home-page-title来避免这个问题。无
tailwindcss 官网（五）核心概念：添加新的功能类、函数与指令（@tailwind、@apply、!important、@layer、@variants、 theme()）、px、em、rem

tailwindcss 官网（五）核心概念：添加新的功能类、函数与指令（@tailwind、@apply、!important、@layer、@variants、@responsive、 theme()、 @screen）、px、em、rem 官网：安装 - Tailwind CSS 中文文档 !important 这个属性可以让浏览器优选执行这个语句，加上!importanrt可以覆盖父级的样式
CSS库 Tailwind

2021年的最后一段时间，还剩最后一周差不多就要放假了。今年一直在做的一个项目已经在元旦前后结项，无所事事几天之后，部门老大突发奇想：我们用最后一周的时间来更新一下公司的官网吧。就这样，周一上午，老大兴致勃勃的给介绍了一下tailwindcss，并扬言让我等边学边做，用一周的时间完成公司官网的所有页面的更新。今天一整天都在使用tailwind CSS编码，对于第一次接触到这种开发方式的我来说

tailwind

@nativescript/tailwind

Usage (with @nativescript/webpack version 5.x)

Using TailwindCSS JIT (just in time)

Using a PostCSS config

Usage (with @nativescript/webpack version <5.x)

Usage with the pre-built css

同类工具

相关阅读

相关文章

相关问答

相关文档